My Angular application is fairly big already and I am using the rootScope to municate between directives and controllers.

Directive 1
scope.$root.$broadcast('some:event');

Controller 1
$rootScope.$on('some:event', function() { I get called multiple times :( });
$scope.$on('some:event', function() { I am not getting called at all :( });

For some reason, my listeners get called multiple times (2x to be exact). I have the feeling that somewhere, I built in a second rootScope or something. I am currently debugging my app, but it is like finding the needle in the haystack.

This thread tries to solve a similar problem: AngularJs broadcast repeating execution too many times. It suggests to use $scope only which does not work for me in my particular case. The broadcasted events never reach the listeners.

My question would be if someone has an idea why this could happen? Maybe I am doing a silly mistake I am not aware of. Catching an event twice I only sent once does sound wrong.

Thanks in advance

My Angular application is fairly big already and I am using the rootScope to municate between directives and controllers.

Directive 1
scope.$root.$broadcast('some:event');

Controller 1
$rootScope.$on('some:event', function() { I get called multiple times :( });
$scope.$on('some:event', function() { I am not getting called at all :( });

For some reason, my listeners get called multiple times (2x to be exact). I have the feeling that somewhere, I built in a second rootScope or something. I am currently debugging my app, but it is like finding the needle in the haystack.

This thread tries to solve a similar problem: AngularJs broadcast repeating execution too many times. It suggests to use $scope only which does not work for me in my particular case. The broadcasted events never reach the listeners.

My question would be if someone has an idea why this could happen? Maybe I am doing a silly mistake I am not aware of. Catching an event twice I only sent once does sound wrong.

Thanks in advance

• javascript
• angularjs

• You must use the $scope instead of $rootScope to use the broadcasted events .... can you show us the reason why you can't use $scope.on()??? – Bhojendra Rauniyar Commented Jan 24, 2015 at 10:22
• 1 Why can't you follow the suggestion in the linked SO question? You should broadcast from $rootScope (if you are trying to reach everyone), but listen with $scope.$on – New Dev Commented Jan 24, 2015 at 10:22
• 1 Is it possible that the event is fired only once, but you attach the listener multiple times? Maybe you have two instances of the controller? – Thomas Commented Jan 24, 2015 at 10:32
• 1 You must use the $scope instead of $rootScope to use the broadcasted events this is false. And if you are trying to reach everyone $rootScope.$emit and $rootScope.$on is better for performance. My first guess is what Thomas mentioned. – tasseKATT Commented Jan 24, 2015 at 10:34
• 1 Note that when using $rootScope.$on you need to manually unregister when the controller's scope is destroyed, or you will end up with a new listener every time the controller is initialized (same goes for directives). – tasseKATT Commented Jan 24, 2015 at 10:38

2 Answers 2

use

$rootScope.$emit('some:event') ;

because it goes upwards and rootscope ist the top level

use

var myListener = $rootScope.$on('some:event', function (event, data) { });

$scope.$on('$destroy', myListener); 

dont forgot to unregister on destroy and u have a bus munication on the same level

Edit: To your problem: maybe some other listener prevent it from bubbling further like this:.

 $scope.$on('some:event', function (event, data) {
    event.stopPropagation();
 });

And the reason why your listener receive mulltible times could be that u send multible times. test with sending a timestring with your event and see if it is the same

Here is a fiddle with my Eventbus factory i use http://jsfiddle/navqtaoj/2/ Sometimes the good old observerpattern works also fine:http://jsfiddle/b742qdpz/ if it is to much overhead to watch a value in a service

Tighten Your Module & Scope

Many times, when you're experiencing multiple dispatches of an event -- or more specifically, when you've multiple Handlers being invoked then your modules need to utilize locality more.

By locality I mean, try not to use globals as much as possible. This can (and usually does) occur, usually, when you're listening/firing events off of $rootScope instead of $scope -- which is more local.

What Angular Does (In a Nutshell)

Angular has a special way of event-subscription-binding which differes based upon scope.

If an event is subscribed to using a controller, which uses a perishable scope, then Angular automatically unsubscribes to each event when the controller closes.

However, when subscribing using $rootScope, Angular will not insist on detaching these subscription-bindings. So...

TL;DR

Every time you load a view -- effectively constructing a new controller -- you are undoubtedly wiring up another listener for each subscription.

Hope this helps!