在角度指令 $destroy 上调用多个回调

Question

假设我有一个使用名为myController的外部控制器的指令

(function() {
    'use strict';

    angular
        .module('app')
        .controller('myController', myController);

    myController.$inject = ['$rootScope'];
    function myController($rootScope) {
        //my app code...
        var clearRoot1 = $rootScope.$on('event1', doSomething);
        var clearRoot2 = $rootScope.$on('event2', doSomethingElse);
        var clearWatcher = $scope.$watch('model', updateSomething);

        $scope.$on('$destroy', clearWatcher);
        $scope.$on('$destroy', clearRoot1);
        $scope.$on('$destroy', clearRoot2);
    }
})();

如您所见，我正在创建多个侦听器，因此我必须侦听 $destroy 事件以清除每个侦听器。

所以我有两个问题，一个是实用的，一个主要是美学的。

实际问题 你真的需要调用 clearWatcher 作为观察者绑定到指令的 $scope ，当指令元素从 DOM 中删除时将被销毁？

审美问题 有没有一种很好的方法来清除所有监听器，只需一个回调 $destroy 事件？类似$scope.$on('$destroy', ['clear1', 'clear2']);

Answer 1

实际问题你真的需要调用 clearWatcher 吗 绑定到将被销毁的指令的 $scope 的观察者 何时从 DOM 中移除指令元素？

不，您不需要调用观察器函数，当作用域被销毁时，Angular 会为您进行清理。

查看此链接：angular.js $destroy event - should I manually unbind?

注意：虽然这些观察者会在作用域被销毁时解除绑定，但这仅适用于当前作用域 $destroy。您在此处的 $rootScope 上有侦听器

    var clearRoot1 = $rootScope.$on('event1', doSomething);
    var clearRoot2 = $rootScope.$on('event2', doSomethingElse);

这些不会被解除绑定，因为销毁这个控制器 $scope 不会在 $rootScope 上调用 $destroy()。在这种情况下，假设您希望这些侦听器在此范围被销毁时解除绑定，那么您确实需要调用这些观察器。这就引出了你的第二个问题。

审美问题有没有什么好办法让所有的听众都清零 $destroy 事件只有一个回调？就像是 $scope.$on('$destroy', ['clear1', 'clear2']);

不是那种方式。通过 $scope.$on 方法监听 '$destroy' 和监听任何其他事件一样，see the documentation for $on

$on(名字，监听器);监听给定类型的事件。见 $emit 讨论事件生命周期。

事件监听函数格式为：function(event, args...)。这 传入监听器的事件对象具有以下属性：

targetScope - {Scope}：事件被 $emit-ed 或 $广播版。

currentScope - {Scope}：当前的范围 处理事件。一旦事件通过范围传播 层次结构，此属性设置为 null。

name - {string}：名称 事件。

stopPropagation - {function=}：调用 stopPropagation 函数 将取消进一步的事件传播（仅适用于 是 $emit-ed)。

preventDefault - {function}：调用 preventDefault 将 defaultPrevented 标志设置为 true。

defaultPrevented - {boolean}: true 如果调用了 preventDefault。

您可以将单个函数注册到destroy 事件，并从被调用函数调用观察者。您可以在注册时将它们存储在本地，或者立即调用它们。这是您更新的示例以反映这些选项中的第一个。

(function() {
'use strict';

 angular
  .module('app')
  .controller('myController', myController);

  myController.$inject = ['$rootScope'];
  function myController($rootScope) {

    //my app code...

    $scope.$on('$destroy', function() { cleanup(); });

    function initialize() {
      $scope.rootWatchers = [];

      $scope.rootWatchers.push( $rootScope.$on('event1', doSomething) );
      $scope.rootWatchers.push( $rootScope.$on('event2', doSomethingElse) );
      $scope.$watch('model', updateSomething);
    }

    function cleanup() {
      angular.forEach( $scope.rootWatchers, function(stopWatcher) { stopWatcher(); } );
    }

  }

})();