javascript - 'destroyed' Controller 中的 Angular $rootScope $on 监听器继续运行

Question

我在 index.html 中使用 ng-view 指令设置了我的 Angular 应用程序， View 使用 $routeProvider 配置配置，每个 View 都有自己的 Controller 。在一个 View Controller 中，我有一个 $rootScope.$on 监听器来监视事件。我希望这个监听器在我更改 View 时不再运行，但事实并非如此。 watch 在触发时仍会继续调用代码，即使我切换到不再使用该 Controller 的 View 也是如此。

我已经设置了一些测试代码来监听$destroy事件，我可以看到$destroy事件被触发了，但是监听函数仍然运行。我已经在 watch 函数和 $destroy 事件监听器中打印出 $scope.$id，我可以看到 ID 匹配。因此，似乎即使在特定范围发生 $destroy 事件之后，其上的 $on 监听器仍会继续运行。为什么会这样？我的印象是当导航到不同的 View 时，或者在任何情况下 Controller 被销毁，然后它的监听器被清除。

请联系: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

所以这个问题完全改变了，所以上下文完全不同，所以我之前的回答不再与这个问题真正相关，除了它适用的方式完全相同。

您可以像我在下面的回答一样取消注册您的听众。

$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', unregister);
});

上一个答案

您应该确保在您的 Controller 范围被销毁时解除绑定(bind)。

创建 watch 时，angular 会为您创建的 watch 返回一个解除绑定(bind)函数。这很好地涵盖了here .

创建对您创建的 watch 的引用:

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

像以前一样注意作用域的破坏，但是在那里调用你的unbinder。

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

调用unbinder 函数后，您的 watch 将被删除。