angularjs - 如何在 AngularJS 中取消向 rootscope 注册广播事件？

Question

我有以下内容:

angular.module('test')
    .controller('QuestionsStatusController1',
    ['$rootScope', '$scope', '$resource', '$state',
    function ($rootScope, $scope, $resource, $state) {

        $scope.action2 = function() {
            $rootScope.$broadcast('action2@QuestionStatusController1');
        }

    }]);

angular.module('test')
   .controller('QuestionsStatusController2',
   ['$rootScope', '$scope', '$resource', '$state',
   function ($rootScope, $scope, $resource, $state) {

    $rootScope.$on('action2@QuestionStatusController1', function {
         //write your listener here
    })

   }]);

据我了解，我需要取消注册监听事件。有人可以告诉我如何编码/执行此操作吗？

Answer 1

如果您不取消注册该事件，则会出现内存泄漏，因为您传递给 $on 的函数将不会被清理(因为对它的引用仍然存在) 。更重要的是，函数在其作用域内引用的任何变量也将被泄漏。如果您的 Controller 在应用程序中多次创建/销毁，这将导致您的函数被多次调用。幸运的是，AngularJS 提供了一些有用的方法来避免内存泄漏和不需要的行为:

• $on 方法返回一个函数，可以调用该函数来取消注册事件监听器。您需要将取消注册函数保存为变量以供以后使用: var cleanUpFunc = $scope.$on('yourevent', ...); 请参阅 $ 的文档于:http://docs.angularjs.org/api/ng.$rootScope.Scope#$on




• 每当 Angular 中的作用域被清理(即 Controller 被销毁)时，就会在该作用域上触发 $destroy 事件。您可以注册 $scope 的 $destroy 事件并从中调用您的 cleanUpFunc。





您可以将这两个有用的东西结合在一起，以正确清理您的订阅。我整理了一个例子:http://plnkr.co/edit/HGK9W0VJGip6fhYQQBCg?p=preview 。如果您注释掉 cleanUpFunc(); 行，然后多次点击切换和执行操作按钮，您会注意到我们的事件处理程序被多次调用，这并不是真正需要的。 p>

现在，完成所有这些之后，为了使您的具体情况正确运行，只需将 QuestionsStatusController2 中的代码更改为以下内容:

angular.module('test')
   .controller('QuestionsStatusController2',
   ['$rootScope', '$scope', '$resource', '$state',
   function ($rootScope, $scope, $resource, $state) {

    var cleanUpFunc = $rootScope.$on('action2@QuestionStatusController1', function {
         //write your listener here
    });

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

   }]);

通过在 $destroy 中调用 cleanUpFunc()，action2@QuestionStatusController1 事件的事件监听器将被取消订阅，您将当你的 Controller 被清理时，不再泄漏内存。