指令的$ rootScope。$ on事件监听器剩余问题

Question

我有一个指令，在他的控制器中包含一个观察者：

$rootScope.$on('broad1', (event, args) => {
            doSomething()
});

然后，我重新加载（使用$ state.go）我的页面的一部分，其中包含我的指令。不幸的是，即使我的指令是重新启动的，当然也没有重复，我会在我的rootcope中创建并添加一个新的观察者。 （我已经知道，当观察者连接到rootcope时，不会销毁，而指令会从DOM中删除）

因此，当我广播'broad1'时，观察者被执行n次（对应于之前的n次重新加载）。为什么？

Answer 1

在指令中使用AngularJS事件总线时，事件侦听器应放在本地范围内。活动应该从$rootScope广播：

app.directive("myDirective", function() {
    return {
        link: postLink,
    };
    function postLink(scope,elem,attrs) {
        scope.$on('broad1', (event, args) => {
            doSomething()
        });
        scope.broadcast = function(data) {
            scope.$root.$broadcast("broad1", data);
        };
    };
})

范围被销毁后，将自动删除事件侦听器。

有关更多信息，请参阅

• AngularJS $rootScope/$scope Type API Reference
• AngularJS Developer Guide - Scope Event Propagation

---

Update

请记住，AngularJS事件总线效率低下且过时。尽可能使用更直接的方式将事件传达给收件人。

来自Docs：

仅对原子事件使用。$ broadcast（）和。$ on（）

在整个应用程序中全局相关的事件（例如用户身份验证或应用程序关闭）。如果您需要特定于模块，服务或小部件的事件，则应考虑服务，指令控制器或第三方库

• 直接注入服务和调用方法对于直接通信也很有用
• 指令能够通过指令控制器直接相互通信

- AngularJS Wiki - Best Practices

也可以看看，

• AngularJS Developer Guide - Component-based application architecture
• AngularJS 1.5+ Components do not support Watchers, what is the work around?

Answer 2

感谢您的反应和见解，我已经使用$ scope.on [...]和$ rootscope.broadcast [...]修复了它。另一方面，“服务方式”也是一个很好的方式。

祝你今天愉快。