避免 $rootScope.$on — 它有内存泄漏的风险

Question

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>

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

event fired in controller
event fired in controller

Answer 1

避免$rootScope.$on— 它有内存泄漏的风险

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

为避免内存泄漏，请将事件侦听器添加到控制器的$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 事件的方式传播事件。该事件可以广播到作用域子项或发出到作用域父项。

有关详细信息，请参阅

• AngularJS 开发人员指南 - 作用域事件传播

<小时 />

更新

我

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

确保指令的名称在 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>