从 AngularJS 的指令中删除事件监听器

Question

我正在尝试在 AngularJS 中实现一个简单的指令。特别是我想开发一个加载器按钮，在按下时改变其外观，并且我想在我的应用程序的所有需要​​它的页面中重用它。

我在开发者指南中读到：

"AngularJS 会发出一些特殊的事件。当使用 Angular 的编译器编译的 DOM 节点被销毁时，它会发出 $destroy 事件。同样，当 AngularJS 作用域被销毁时，它会广播 $destroy 事件到监听范围。通过监听这个事件，你可以移除可能导致内存泄漏的事件监听器。注册到范围和元素的监听器在销毁时会自动清理，但是如果你在服务上注册了监听器，或者注册了监听器在没有被删除的 DOM 节点上，您必须自己清理它，否则可能会导致内存泄漏。”

在我的链接函数中，我为事件监听器添加了这段代码：

var onLoaderButtonClickEvent = element.on('click', function(){
//Some stuff

});

现在，我是否将其视为 DOM 元素的侦听器（因此我必须删除它）？我有点困惑。

我认为我不必删除侦听器，因为它位于“元素”上。对吗？

谢谢大家

Answer 1

element.remove() 会在指令被销毁时自动调用，从而移除元素上的所有侦听器。如果您将 DOM 侦听器附加到任何其他 DOM 元素，则只需手动删除它们。

来自 angular 的documentation：

注册到作用域和元素的侦听器在销毁时会自动清理，但如果您在服务上注册了侦听器，或者在未被删除的 DOM 节点上注册了侦听器，则必须清理它自己动手，否则可能会导致内存泄漏。

Answer 2

答案是是的。由于您在 AngularJS 之外附加了一个事件处理程序，因此您需要自己清理它。

您可以通过监听$destroy 事件来做到这一点：

scope.$on('$destroy', function(){
    element.off('click');
});