How can I unregister a broadcast event to the root directory in AngularJS?

Question

I have the following:

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

I understand that I need to unregister the listening event. Can someone tell me how can I do this / do this?

Answer 1

If you do not unregister the event, you will receive a memory leak, since the function that you pass to $on will not be cleared (since the link to it still exists). More importantly, any variables that reference links in their area will also be skipped. This will cause your function to be called several times if your controller is created / destroyed several times in the application. Fortunately, AngularJS provides several useful methods to avoid memory leaks and unwanted behavior:

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

• Whenever the cleanup area is cleared in Angular (i.e. the controller is destroyed), the $destroy event is fired into that area. You can register for the $scope $destroy event and call cleanUpFunc from this.

You can link these two useful things to choose the right subscription. I gave an example of this: http://plnkr.co/edit/HGK9W0VJGip6fhYQQBCg?p=preview . If you comment the line cleanUpFunc(); and then press the switch button several times and do something, you will notice that our event handler is called several times, which is really not required.

Now, after all, so that your specific situation behaves 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() calling cleanUpFunc() in $destroy , your event listener for the action2@QuestionStatusController1 event will not be signed and you will no longer skip memory when your controller is cleared.

Answer 2

Register the listener on the local $scope , not $rootScope , and the listener will be automatically destroyed when the controller is removed.

So, we will publish

 // EXAMPLE PUBLISHER angular.module('test').controller('CtrlPublish', ['$rootScope', '$scope', function ($rootScope, $scope) { $rootScope.$broadcast('topic', 'message'); }]); 

And subscribe

 // EXAMPLE SUBSCRIBER angular.module('test').controller('ctrlSubscribe', ['$scope', function ($scope) { $scope.$on('topic', function (event, arg) { $scope.receiver = 'got your ' + arg; }); }]); 

Plunker

Answer 3

Here is the source code for the deregistration logic. You can do:

 $rootScope.$on('action2@QuestionStatusController1', function () { $rootScope.$$listeners['action2@QuestionStatusController1'] = []; }) 

or call the deregistration function returned with $on()

 var deregistration = $rootScope.$on('action2@QuestionStatusController1', function () { deregistration(); }) 

Answer 4

 $scope.$on('saveCancelLeadInfo', function (event, args) { if ($scope.$$listenerCount["saveCancelLeadInfo"] > 1) { $scope.$$listenerCount["saveCancelLeadInfo"] = 0; } });