javascript - 让两个自定义指令在 AngularJS 中相互交互

Question

我有两个指令

angular.module('myApp.directives', []).
            directive('exampleDirective', ['version', function(version) {
             return {
                      link:function(scope,elm,attr) {
                         elm.on('click',function() {
                              //access exampleDirective2 behaviour
                         });
                      }
                    }
            }]).
            directive('exampleDirective2', ['version', function(version) {
             return {
                      link:function(scope,elm,attr) {
                         elm.on('change',function() {
                              //access exampleDirective behaviour
                         });
                      }
                    }
            }]);

正如您在 exampleDirective elm.on(click) 函数中看到的那样，我想获取 exampleDirective2 函数，反之亦然。

AngularJS 有没有办法实现这个？

Answer 1

这个问题有三种解决方案:

第一个解决方案:使用服务

在指令之间共享可以包含数据和函数的服务。

.service('myService', function(){
    this.data = //....
    this.function = function() //...
})

.directive('dir1', ['myService', function(myService) {
   //...
   link: function(scope, elem, attrs) {
       scope.data = myService.data;
   }
}])

其他指令也一样。

第二种解决方案:指令的 Controller

如果您的指令具有父/子/兄弟关系:

.directive('dir1', function(){
    return {
        controller: function(scope, elem, attrs) {
            this.sayHello = function() {
                alert('hello')
            }
        }
    }
})

.directive('dir2', function(){
    return {
        require: '^dir1',
        link: function(scope, elem, attrs, dir1Ctrl) {
            dir1Ctrl.sayHello(); //will alert hello
        }
    }
})

但是，如果您的指令具有隔离作用域，这将不起作用。此外，根据指令的关系(父/子或兄弟)，require 属性的语法会略有变化；您可以在有关指令的 AngularJS 文档中找到更多信息。

方案三:使用事件

您还可以从指令范围发出/广播事件，或注入(inject) $rootScope 并将其用作事件总线:

.directive('dir1', function($rootScope){
    return {   
        link: function(scope, elem, attrs) {
           var emitEvent = function(){
               $rootScope.$emit('somethingHappenedEvent', { /*you can pass optional data*/ });
           }

           emitEvent();
       }
    }
})

.directive('dir2', function($rootScope) {
    return {
        link: function(scope, elem, attrs) {
            $rootScope.$on('somethingHappenedEvent', function(event) {
                if(!event.defaultPrevented) {
                    //react to event here
                }
            })      
        }
    }
})

你也可以使用普通的 scope 而不是 $rootScope，但在那种情况下你必须记住事件会冒泡/向下所有范围(取决于 $emit 或 $broadcast 的使用)。我更喜欢从 $rootScope 中使用 $emit，因为它将是唯一能够捕获事件的范围，而且速度也相当快。