使用Angular添加和移除事件监听器

Question

我需要在一个Angular应用程序中添加一个事件监听器。一个外部插件会监听该事件以触发某些操作。

我做了这个：

$window.addEventListener('itemLoaded', itemLoaded, false);

代码可以运行，但我无法找到一种方法在状态改变时删除该事件（我使用ui-router）。

您是否了解在Angular中添加和删除此事件的更好方法，尤其是在我的状态更改时？

感谢您的帮助。

- David Dias

Answer 1

如果这段代码是在控制器内调用的，你可以监听一个 $scope.$destroy() 事件，在控制器卸载时移除监听器。

// Inside some controller
var listener = function listen() {...};
var element = document;

element.addEventListener('click', listener)

$scope.$on('$destroy', function(event, object) { 
    element.removeListener('click', listener);
})

here's the plnkr example

- 4UmNinja

---

是的，我正在控制器中调用它。你能否为我编写删除该事件的代码？我尝试了'removeEventListener()'但似乎不起作用... - David Dias

这里有一个很好的提及..stack post。你可能需要将你的"itemLoaded"函数附加到控制器的作用域，然后在该$destroy事件内按名称删除它。这是我现在能想到的最好的..plnkr - 4UmNinja

$scope.$on('$destroy', function(e){ $window.removeEventListener('itemLoaded', itemLoaded); });代码完美运行 :) - David Dias

Answer 2

如果您正在使用ui-router，可以使用$state.current.url检查当前状态。如果当前URL更改，则可以删除事件。您甚至可以在路由文件中使用$watch来检查状态是否已更改。

- Syam Pillai

---

谢谢你的提示，我的问题更多与删除事件监听器的代码相关，我找不到它... - David Dias