避免在—上使用$rootScope.$；它有内存泄漏的风险 Angularjs:订阅指令中的服务事件不会更新

我正在尝试

$emit

/

$broadcast

服务中的事件，并在指令中订阅它，但它没有被触发

在本例中，我尝试了

$emit

和

$broadcast

两种方法，但尽管这两种方法都可以在控制器中看到，但在指令中都看不到

有人知道如何做到这一点吗

angular.module('my_app', [])

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

.directive('myDirective', ['$rootScope', function($rootScope) {
    return {
        scope: {
            some_var: '@?'
        },
        link: function(scope, element, attrs, controller) {
            $rootScope.$on('myEvent', ()=>{
                console.log('event fired in directive');
            })
        }
    }
}])

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

    my_service.do_something();

}])

以及html：

<my-directive ng-if="some_expression"></my-directive>

避免

$rootScope.$on

-这有内存泄漏的风险 在操作过程中，AngularJS添加和删除DOM及其附加的指令和控制器。删除指令或控制器时，不会自动删除由添加的侦听器函数。这可能导致内存泄漏和意外行为

为避免内存泄漏，将事件侦听器添加到控制器的

$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事件类似的方式传播事件。事件可以是作用域子级或作用域父级

有关详细信息，请参阅

---

更新 我更正了我的问题，因为我确实在链接函数中有事件侦听器。但仍然不起作用

确保指令的名称在JavaScript中：

.̶d̶i̶r̶e̶c̶t̶i̶v̶e̶(̶'̶m̶y̶_̶d̶i̶r̶e̶c̶t̶i̶v̶e̶'̶,̶ ̶[̶f̶u̶n̶c̶t̶i̶o̶n̶(̶)̶ ̶{̶
.directive('myDirective', [function() {
   // ...
}])

在HTML中：

<my-directive>
</my-directive>

谢谢您的回复。我纠正了我的问题，因为我确实在链接函数中有事件侦听器。由于JavaScript或HTML中的输入错误，指令无法自动实例化是很常见的。检查指令是否通过在指令构造函数中放置

console.log

来实例化。噢，伙计！你说得对。它没有实例化。但这是因为我在使用指令时有一个

ng if

<代码>。切换到ng秀，一切正常。感谢您提供的信息和正确的方向。该指令在参数列表之后有一个错误：

Uncaught SyntaxError:missing）

<my-directive>
</my-directive>