'破壊された'コントローラのリスナーのAngular $ rootScope $は継続的に実行されます

Question

角度アプリは、index.htmlにng-viewディレクティブで設定し、$ routeProvider設定と各ビューに独自のコントローラを設定します。あるView Controllerでは、イベントを監視する$ rootScope。$がリスナーにあります。ビューを変更したときにこのリスナーが動作しなくなると思っていますが、そうではありません。たとえそのコントローラをもはや使用していないビューに切り替えた場合でも、時計はトリガされたときにコードを呼び出し続けます。

$ destroyイベントを聴くためのテストコードをいくつか設定しましたが、$ destroyイベントがトリガーされていますが、リスナー関数は引き続き実行されています。ウォッチ関数と$ destroyイベントリスナの両方で$ scope。$ idを出力しましたが、IDが一致していることがわかります。したがって、特定のスコープに対して$ destroyイベントが発生した後でも、$ onリスナーがまだ実行されているようです。これはなぜですか？私は、別のビューに移動したり、コントローラが破棄されたりすると、そのリスナーがクリアされるという印象を受けました。

Plnkr：http://plnkr.co/edit/TxssxQJY5PVLTAIAr4xD?p=preview

var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']); 

animateApp.config(function($routeProvider) { 
    $routeProvider 
     .when('/', { 
      templateUrl: 'page-home.html', 
      controller: 'mainController' 
     }) 
     .when('/about', { 
      templateUrl: 'page-about.html', 
      controller: 'aboutController' 
     }) 
     .when('/contact', { 
      templateUrl: 'page-contact.html', 
      controller: 'contactController' 
     }); 

}); 

angular.module('animateApp').service('service', ['$interval', '$rootScope', service]); 
function service ($interval, $rootScope) { 
    var service = {}; 
    service.abc = 1; 
     $interval(function() { 
     service.abc++; 
     $rootScope.$broadcast('service.abc', service.abc); 
    }, 500); 

    return service; 

} 


animateApp.controller('mainController', function($scope, $rootScope, service) { 
    $scope.pageClass = 'page-home'; 
    $scope.$on('$destroy', function iVeBeenDismissed() { 
         console.log('goodbye ' + $scope.$id); 
     // release resources, cancel request... 
    }) 

    $rootScope.$on('service.abc', function (newval) { 
     console.log($scope.$id); 
    }) 
}); 

animateApp.controller('aboutController', function($scope) { 
    $scope.pageClass = 'page-about'; 
}); 

animateApp.controller('contactController', function($scope) { 
    $scope.pageClass = 'page-contact'; 
}); 

Answer 1

あなたのコントローラで$destroyイベントリスナーを追加する必要があります。これにより

scope.$on('$destroy', function() { 
     element.off('blur'); // example 
     element = null; 
    }); 

を手動にはより積極的な$ウォッチャーがないことを確認してくださいよ非アクティブなコントローラ。

Answer 2

質問が完全に変更されてコンテキストが完全に異なるようになったので、これまでの回答は全く同じように適用されます

以下の回答と同じ点でリスナーの登録を解除できます。

$rootScope.$on()は、登録解除機能を返します。

したがって、あなたのmainControllerのように書き換えることができます。

animateApp.controller('mainController', function($scope, $rootScope, service) { 
    $scope.pageClass = 'page-home'; 
    var unregister = $rootScope.$on('service.abc', function (newval) { 
     console.log($scope.$id); 
    }); 
    $scope.$on('$destroy', function iVeBeenDismissed() { 
     unregister(); 
    }); 
}); 

前の回答

あなたは、コントローラのスコープが破棄されたとき、あなたの時計をバインド解除することを確認する必要があります。

時計を作成すると、作成した時計のアンバインド機能が返されます。これはかなりよくカバーされていますhere。

作成した時計への参照を作成します。

var unbinder = $scope.$watch("foo.bar", doStuff); 

はあなたがあったように、あなたの範囲の破壊に注意、しかしそこにあなたのunbinderを呼び出します。

$scope.$on("$destroy", function(){ 
    if(typeof unbinder === "function") 
     unbinder(); 
}); 

unbinder関数が呼び出されると、時計は削除されます。