AngularJs broadcast repeating execution too many times

Question

Inside one of my Angular controllers, I have this:

// controller A
$rootScope.$on("myEventFire", function(event, reload) {
    someAction();
});

In another controller I have this:

// controller B
$scope.openList = function(page) {
    $rootScope.$broadcast('myEventFire', 1);
}

Now, this is a single-page app. When I go to controller A initially and try triggering this event, someAction() is going to be executed once. If I navigate away and come back again to controller A and do the same thing, someAction() gets executed twice. If I do it again, it happens three times and so on. What am I doing wrong here?

Prettify

Answer 1

Can you try just using $scope.$on()? Every time controller A is created, it is adding a new listener on the root scope, and that doesn't get destroyed when you navigate away and back. If you do it on the controller's local scope, the listener should get removed when you navigate away and your scope gets destroyed.

// controller A
$scope.$on("myEventFire", function(event, reload) {
    someAction();
});

$broadcast sends the event downward to all child scopes so it should be picked up on your local scope. $emit works the other way bubbling up towards the root scope.

Kearns

There are many things in life that I'm grateful for...this answer is one of them. – Leucocratic

Wow. Just wow. Thanks for this wonderful answer. Banging my head against a brick wall for the past 45 minutes trying to understand why my $rootScope.$on... method was being called more times than it should. Thank you. – Guayule

Thank you so much for info. Much helpful to understand terminology behind it. – Intrench

was helpful even in 2018. – Ethelred

What about if we want to communicate between two controllers? I am using $rootScope.$broadcast('event:login-failed', 401); but its triggered more than one time. – Blackout

Answer 2

you can also remove it when the scope is destroyed, by running the return callback from the $rootScope.$on().

I.e.

var destroyFoo;

destroyFoo = $rootScope.$on('foo', function() {});

$scope.$on('$destroy', function() {
  destroyFoo(); // remove listener.
});       

Quasi

Answer 3

if you don't want to destroy,

I think we can check the listener event first - AngularJS 1.2.15

So I think this should work :

if(!$rootScope.$$listenerCount['myEventFire']){
    $rootScope.$on("myEventFire", function(event, reload) {
        someAction();
    });
}

Aussie

it's generally bad form to access $$properties. They are considered private to angular. – Quasi

Worked for me... but is $$listenerCount instead of $$listerCount. – Motoring

If your context is static, that should work, but I think you should really figure out where the second listener is getting added because it wouldn't be called. For instance if a control is created and the listener is added, then it is destroyed and another control is created in it's place, the first listener will still be the one that is executed. It's context will still be accessing data in the context of the old control. – Kearns

Answer 4

If it helps anyone I had a similar issue in a directive. Each time the directive opened the number of times the event was fired increased.

I solved it by using the following (this was in my controllers init function but I guess it could have been defined in the controller itself. In my case my controller needed to reinitialise when the event fired)

 if (!$scope.onMyEvent) $scope.onMyEvent= $scope.$on('myEvent',function(event,data){
        .....
        });

Schist

Answer 5

For my case...

if ($rootScope.$$listenerCount['myEventFire']) {
    $rootScope.$$listeners.broadcastShowMessageError = [];
};

$rootScope.$on('myEventFire', function (event, reload) {
    someAction();
})

Motoring