AddEventListener 与 Angular 并删除它答案

【问题标题】：AddEventListener with Angular and remove itAddEventListener 与 Angular 并删除它
【发布时间】：2016-04-19 07:15:03
【问题描述】：

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

我做到了：

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

它有效，但是当我更改状态时我找不到删除该事件的方法（我使用 ui-router）。

如果我的状态发生变化，你知道在 Angular 中添加和删除事件的更好方法吗？

感谢您的帮助。

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案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);
})

这是plnkr example

【讨论】：

是的，我将其调用到控制器中。你能给我写代码来删除那个事件吗？我尝试了“removeEventListener()”，但它似乎不起作用......
这里很好地提到了它..stack post。您可能必须将“itemLoaded”函数附加到控制器范围，然后在 $destroy 事件中按名称将其删除。这是我现在能想到的最好的..plnkr
` $scope.$on('$destroy', function(e){ $window.removeEventListener('itemLoaded', itemLoaded); }); ` 完美运行 :)

【解决方案2】：

如果您使用的是 ui-router，您可以使用 $state.current.url 检查当前状态。如果当前 url 发生变化，您可以删除该事件。你甚至可以在路由文件中使用$watch 来检查状态是否改变

【讨论】：

感谢您的提示，我的问题与删除我找不到的事件侦听器的代码有关...