在角度指令$ 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中刪除時，該$ scope將被銷毀嗎？

不，您不需要調用觀察程序函數，當范圍被破壞時，angular會為您進行清理。

看到這個鏈接： angular.js $ destroy事件-我應該手動解除綁定嗎？

注意：盡管在銷毀范圍時那些觀察者將不受約束，但這僅適用於當前范圍$ destroy。 您在$ rootScope上有監聽器

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

這些不會是未綁定的，因為銷毀此控制器$ scope不會在$ rootScope上調用$ destroy（）。 在這種情況下，假設您希望在銷毀此作用域時使那些偵聽器解除綁定，那么您確實需要調用這些偵聽器。 這使我想到了第二個問題。

美學問題是否有一種不錯的方法來清除$ destroy事件中只有一個回調的所有偵聽器？ 像$ scope。$ on（'$ destroy'，['clear1'，'clear2']）;之類的東西。

不以這種方式。 通過$ scope監聽'$ destroy'。$ on方法與監聽任何其他事件相同， 請參見$ on的文檔

$ on（名稱，監聽者）; 偵聽給定類型的事件。 有關事件生命周期的討論，請參見$ emit。

事件偵聽器函數格式為：function（event，args ...）。 傳遞給偵聽器的事件對象具有以下屬性：

targetScope-{Scope}：$ mit-ed或$ broadcast-ed事件的范圍。

currentScope-{Scope}：當前正在處理事件的范圍。 一旦事件在范圍層次結構中傳播，此屬性將設置為null。

名稱-{string}：事件的名稱。

stopPropagation-{function =}：調用stopPropagation函數將取消進一步的事件傳播（僅適用於$ emit-ed事件）。

preventDefault-{function}：調用preventDefault將defaultPrevented標志設置為true。

defaultPrevented-{boolean}：如果調用了preventDefault，則為true。

您可以將一個函數注冊到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(); } );
    }

  }

})();