您可以使用所谓的事件在它们之间进行通信的一种方式。
一个指令可以在 rootscope 上发出一个事件,然后任何人都可以收听该事件。您可以使用$rootScope.$emit
或$rootScope.$broadcast
发布带有数据的事件并用于$scope.$on
侦听事件。在你的情况下,你也可以这样做$scope.$emit
。
app.directive("firstDir", function(){
return {
restrict : 'E',
controller : function($scope){
this.data = 'init value';
this.set = function(value){
//EMIT THE EVENT WITH DATA
$scope.$emit('FIRST_DIR_UPDATED', value);
this.data = value;
// communication with second Directive ???
}
},
controllerAs : 'firstCtrl'
};
});
app.directive("secondDir", function(){
return {
restrict : 'E',
controller : function($scope){
var _that = this;
//LISTEN TO THE EVENT
$scope.$on('FIRST_DIR_UPDATED', function(e, data){
_that.data = data;
});
this.data = 'init value';
},
controllerAs : 'secondCtrl'
};
});
演示
Demo2
____________________________________________________________________________
现在说到这一点,有时确实需要注入$rootScope
才能将事件启用到应用程序中的不同节点。相反,您可以在您的应用程序中轻松构建发布/订阅机制,并利用原型继承。
在这里,我将2种方法publish
,并subscribe
在$rootScope's
原型应用程序初始化过程中。因此,任何子作用域或隔离作用域都可以使用这些方法,通信将变得更加容易,无需担心是否使用$emit
, $broadcast
,是否需要$rootscope
从隔离作用域指令中注入用于通信等。
app.service('PubSubService', function () {
return {Initialize:Initialize};
function Initialize (scope) {
//Keep a dictionary to store the events and its subscriptions
var publishEventMap = {};
//Register publish events
scope.constructor.prototype.publish = scope.constructor.prototype.publish
|| function () {
var _thisScope = this,
handlers,
args,
evnt;
//Get event and rest of the data
args = [].slice.call(arguments);
evnt = args.splice(0, 1);
//Loop though each handlerMap and invoke the handler
angular.forEach((publishEventMap[evnt] || []), function (handlerMap) {
handlerMap.handler.apply(_thisScope, args);
})
}
//Register Subscribe events
scope.constructor.prototype.subscribe = scope.constructor.prototype.subscribe
|| function (evnt, handler) {
var _thisScope = this,
handlers = (publishEventMap[evnt] = publishEventMap[evnt] || []);
//Just keep the scopeid for reference later for cleanup
handlers.push({ $id: _thisScope.$id, handler: handler });
//When scope is destroy remove the handlers that it has subscribed.
_thisScope.$on('$destroy', function () {
for(var i=0,l=handlers.length; i<l; i++){
if (handlers[i].$id === _thisScope.$id) {
handlers.splice(i, 1);
break;
}
}
});
}
}
}).run(function ($rootScope, PubSubService) {
PubSubService.Initialize($rootScope);
});
你可以让你的应用程序的任何地方发布一个事件而不需要 rootScope。
$scope.publish('eventName', data);
并听取应用的任何地方,而不必担心使用$rootScope
或$emit
或$broadcast
: -
$scope.subscribe('eventName', function(data){
//do somthing
});
演示 - 发布订阅