'销毁'控制器中的监听器角$ rootScope $保持运行

Question

我有我的角应用程序在index.html中使用ng-view指令设置，视图使用$ routeProvider config配置，每个视图都有自己的控制器。在一个视图控制器中，我有一个监听器监视事件的$ rootScope。$。我希望这个监听者在我改变视图时不再运行，但事实并非如此。即使当我切换到不再使用该控制器的视图时，手表仍会在触发时保持调用代码。

我已经设置了一些测试代码来侦听$ destroy事件，并且我可以看到$ destroy事件正在被触发，但侦听器函数仍在运行。我已经在watch函数和$ 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函数被调用，您的手表将被删除。