我怎样才能注销广播事件AngularJS到rootscope? [英] How can I unregister a broadcast event to rootscope in AngularJS?

查看:156
本文介绍了我怎样才能注销广播事件AngularJS到rootscope?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下内容:

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
    })

   }]);

这是我的理解是,我需要注销监听事件。谁能告诉我我怎么可能code /做到这一点?

It's my understanding that I need to unregister the listening event. Can someone tell me how I could code / do this?

推荐答案

如果你不注销的情况下,你会得到一个内存泄漏,因为你传递给 $上的功能将无法得到清理(作为对它的引用仍然存在)。更重要的是,该功能在其范围内引用的变量也将被泄露。这将导致你的函数被调用多次,如果你的控制器被创建/应用程序中被毁多次。幸运的是,AngularJS提供了一些有用的方法,以避免内存泄漏和不必要的行为:

If you don't un-register the event, you will get a memory leak, as the function you pass to $on will not get cleaned up (as a reference to it still exists). More importantly, any variables that function references in its scope will also be leaked. This will cause your function to get called multiple times if your controller gets created/destroyed multiple times in an application. Fortunately, AngularJS provides a couple of useful methods to avoid memory leaks and unwanted behavior:


  • $关于方法返回一个可调用函数取消注册事件侦听器。你会希望你去注册功能,保存为以后使用的变量: VAR cleanUpFunc = $ $范围在('yourevent',...); 查看文档 $关于:<一href=\"http://docs.angularjs.org/api/ng.$rootScope.Scope#$on\">http://docs.angularjs.org/api/ng.$rootScope.Scope#$on

  • The $on method returns a function which can be called to un-register the event listener. You will want to save your de-register function as a variable for later use: var cleanUpFunc = $scope.$on('yourevent', ...); See the documentation for $on: http://docs.angularjs.org/api/ng.$rootScope.Scope#$on

每当范围获取角清理(即控制器被破坏)一个 $摧毁事件在该范围解雇。你可以注册到 $范围 $摧毁事件并调用你的 cleanUpFunc

Whenever a scope gets cleaned up in Angular (i.e. a controller gets destroyed) a $destroy event is fired on that scope. You can register to $scope's $destroy event and call your cleanUpFunc from that.

您可以配合这两个有用的东西放在一起妥善清理你的订阅。我放在一起这样一个例子:<一href=\"http://plnkr.co/edit/HGK9W0VJGip6fhYQQBCg?p=$p$pview\">http://plnkr.co/edit/HGK9W0VJGip6fhYQQBCg?p=$p$pview.如果您注释掉行 cleanUpFunc(); 然后打切换和做的东西几次按钮,你会发现,我们的事件处理程序被调用多次,这是没有真正想要的。

You can tie these two helpful things together to clean up your subscriptions properly. I put together an example of this: http://plnkr.co/edit/HGK9W0VJGip6fhYQQBCg?p=preview. If you comment out the line cleanUpFunc(); and then hit the toggle and do stuff button a few times, you will notice that our event handler gets called multiple times, which is not really desired.

现在,经过所有这一切,使您的具体情况正确的行为,只是改变你的code在 QuestionsStatusController2 为以下内容:

Now, after all of that, to make your specific situation behave correctly, just change your code in QuestionsStatusController2 to the following:

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() $摧毁,您的事件侦听器 1动作@ QuestionStatusController1 活动将取消订阅,当你的控制器被清理了,你将不再内存泄漏。

By calling cleanUpFunc() in $destroy, your event listener for the action2@QuestionStatusController1 event will be un-subscribed and you will no longer be leaking memory when your controller gets cleaned up.

这篇关于我怎样才能注销广播事件AngularJS到rootscope?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆