你能从一个模块中的Controller向另一个模块中的指令控制器发出事件吗?

时间:2013-12-29 02:43:08

标签: angularjs

我分别在单独的模块“app”和“directiveModule”中有一个控制器“MyController”和一个指令“MyDirective”。 DirectiveModule已经注入“app”的angular.module。

我遇到的问题是作为“app”的一部分,我有一个控制器发出一个事件“TEST”,指令的控制器没有接收。如何成功获取自己模块的指令来捕获发射?这可能吗? (注意:我最初尝试过$ scope,然后使用$ rootScope,但两者都没有区别。)

我的控制器:

app.controller('MyController', function($scope, $rootScope) {
  $rootScope.$emit('TEST');
});

我的指示:

directiveModule.directive('MyDirective', ['$rootScope', 'MyService',
function($rootScope, MyService) {

return {
   restrict: 'E',
   controller: ['$scope', '$rootScope', function($scope, $rootScope) {
        $rootScope.$on('TEST', function() {alert("Event Caught")})

}]};
}];

更新:看起来我的指令在广播事件发布时尚未启动。是否有办法使我能够“等待指令实例化”而不是等待“1000”ms的仲裁或其他替代方案?

3 个答案:

答案 0 :(得分:3)

注入主模块的所有模块共享同一个rootScope。 $emit然后向前移动范围树,您需要$broadcast

如果$broadcast来自$rootScope,则所有有效范围都会收到它,因此指令实际上可以使用$scope.$on,而不需要为$rootScope注入$on使用{{1}}

的目的

同样,如果指令是控制器的后代,也可以从控制器范围广播

答案 1 :(得分:3)

我认为您的指令捕获该事件所需的唯一情况是获取一些初始数据 ,具体取决于 MyController,因为如果您的指令独立于MyController,您不需要捕获该事件,只需单独启动该指令。

我的解决方案是使用$ watch在MyController 初始数据 准备就绪时收到通知。

app.controller('MyController', function($scope) {
   $scope.data = {}; //initialize the data, this data could be fetched from an ajax
});

directiveModule.directive('MyDirective', ['MyService',
function(MyService) {

return {
   restrict: 'E',
   controller: ['$scope', function($scope) {
        $scope.$watch("data",function(newValue,OldValue,scope){
             //do your work here when data is changed.
        });  
    }]};
}];

如果您在指令中使用隔离范围:

directiveModule.directive('MyDirective', ['MyService',
    function(MyService) {

    return {
       restrict: 'E',
       scope : {
           directiveData:"=", 
       },
       controller: ['$scope', function($scope) {
            $scope.$watch("directiveData",function(newValue,OldValue,scope){//watch on the directive scope property
                 //do your work here when data is changed.
            });  
        }]};
    }];

您的HTML可能如下所示:

<my-directive directive-data="data" /> //bind isolate scope directive property with controller's scope property.

我认为以下问题是类似的情况:

答案 2 :(得分:2)

你可以。演示:http://plnkr.co/edit/vrZgnu?p=preview

附注:如果您尝试与DOM树中较低的子元素进行通信,则应使用$broadcast$emit用于与父母元素(“向上”方向)进行通信。

但是你真正的问题可能是当你试图发出事件时,指令可能还没有启动。我使用$timeout服务等待1000毫秒来广播事件。

更新

如果您不想等待任意1000毫秒,您可以让指令$emit“就绪”事件通知控制器它已准备就绪。然后从控制器广播。

同样删除了此演示http://plnkr.co/edit/GwrdIw?p=preview中的1000毫秒,一切仍然有效。但我不认为这是一个可靠的解决方案。