如何在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将不会被清除（因为对该函数的引用仍然存在）。更重要的是，在其范围内引用函数的任何变量也将泄漏。如果在应用程序中多次创建/销毁控制器，则将导致多次调用函数。幸运的是，AngularJS提供了两种有用的方法来避免内存泄漏和不良行为：

• 该$on方法返回一个函数，可以调用该函数注销事件侦听器。您将需要将注销功能另存为变量供以后使用：var cleanUpFunc = $scope.$on('yourevent', ...);请参阅以下文档$on：http : //docs.angularjs.org/api/ng.$ro​​otScope.Scope#$on

• 每当在Angular中清理范围（即销毁控制器）时，都会$destroy在该范围上触发事件。您可以注册$scope的$destroy活动，然后通过致电您的活动cleanUpFunc。

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

现在，所有这些，要使您的特定情况正确运行，只需将代码更改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();
    });

   }]);

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