Angularjs：在Directive中订阅Service事件不会更新

Question

我正在尝试在服务中将事件$emit / $broadcast并在指令中订阅，但并未被触发。

在这种情况下，我同时尝试了$emit和$broadcast，但是尽管在控制器中都可以看到它们，但是在指令中都没有看到。

任何人都知道如何实现这一目标吗？

angular.module('my_app', [])

.service('my_service', ['$rootScope', function($rootScope) {
    this.do_something = () => {
        $rootScope.$emit('myEvent');
        $rootScope.$broadcast('myEvent');
    }
}])

.directive('my_directive', ['$rootScope', function($rootScope) {
    $rootScope.$on('myEvent', ()=>{
        console.log('event fired in directive');
    }
}])

.controller('my_controller', ['$rootScope', 'my_app_service', function($rootScope, my_app_service) {
    $rootScope.$on('myEvent', ()=>{
        console.log('event fired in controller');
    }

    my_app_service.do_something();

}])

在这种情况下，我只会得到：

event fired in controller
event fired in controller

Answer 1

为了避免内存泄漏，请将事件侦听器添加到控制器的$scope，而不是$rootScope：

.controller('my_controller', ['$scope', 'my_app_service', function($scope, my_app_service) {
    $scope.$on('myEvent', ()=>{
        console.log('event fired in controller');
    }
    my_app_service.do_something();    
}])

使用伪指令，在链接函数中添加事件侦听器：

.directive('myDirective', function() {
    return {
        link: postLink
    }
    function postLink(scope, elem, attrs) {    
        scope.$on('myEvent', ()=>{
            console.log('event fired in directive');
        });
    }
})

来自文档：

范围事件的传播

范围可以以类似于DOM事件的方式传播事件。事件可以是作用域子项的broadcasted或作用域父项的emitted。

有关更多信息，请参阅

• AngularJS Developer Guide - Scope Event Propagation