如何在 angular 中使用 controllerAs 语法时监听 $destroy

Question

现在我正在摆脱 $scope 对我的 angular 控制器的依赖，以确保我可以轻松地将我的代码迁移到 Angular2。我当前的 angular 版本是 1.4.X。在做同样的事情时，我将 $destroy 侦听器放置在我的控制器范围内，例如 $scope.$on('$destory', function() ....).

我可以看到 $on 方法仅在控制器的 $scope 上可用，但如何在不使用 $scope 依赖项的情况下实现它。

Answer 1

经过一些研究，我发现 $destroy 事件是在删除 DOM 时发出的，并且在相同的 DOM 范围内它广播 $destroy 事件，但同时同一时间，该事件已在 DOM 上传播，将被删除。

你知道有一个依赖项 $element，如果你在控制器中注入它会给你 DOM 你有 ng-controller 指令的地方。所以在你的控制器中注入 $element 然后将监听器放在它上面

$element.on('$destroy', function(){
   //write clean up code here
});

Mine solution will work till 1.4.X version. For 1.5.3+ version you could use Angular lifecycle hook which is $onDestroy like shown by @pgreen2 in above answer. Thanks :)

Answer 2

如果您使用的是 angular 1.5+，他们添加了 lifecycle hooks，您可以在控制器上选择加入。不需要 $scope。只需将一个名为 $onDestroy() 的函数添加到您的控制器，它将在您的控制器被清理时调用：

$onDestroy() - Called on a controller when its containing scope is destroyed. Use this hook for releasing external resources, watches and event handlers.

示例来自 http://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html：

function MyCmpController($element) {

  var clickHandler = function () {
    // do something
  };

  this.$onInit = function () {
    $element.on('click', clickHandler);
  };

  this.$onDestroy = function () {
    $element.off('click', clickHandler);
  };
}

如何在 angular 中使用 controllerAs 语法时监听 $destroy

How to put listen over $destroy while using controllerAs syntax in angular

javascript

events

angularjs

angularjs-lifecycle