Angular $rootScope.$broadcast() event caught twice in controller

Question

Broadcating event on button click :-

$scope.onButtonClick = function(){
    $rootScope.$broadcast('onButtonClick');
}

And catching event in another controller :-

$rootScope.$on('onButtonClick',function(event){
  alert("catched");
  console.log(event);
});

But it caught twice even though it fired only once. Why is that?

Solution 1

As it turned out the multiple controllers were instantiated due to ng-controller declaration in html and also as part of state setup for ui-router.

The solution is to remove one of the declarations.

Solution 2

If you broadcast an event on $rootScope, you can catch the event on each controller $scope. IMO you should not catch the event on the $rootScope.

$scope.$on('onButtonClick',function(event){
  alert("catched");
  console.log(event);
});

I've created a plunker showcase, which shows that it works exactly as expected. Plunker

It could be possible that you have multiple instances of the same controller, where you catch the event. Please check this as Chandermani suggested.

Solution 3

Angular $rootScope.$broadcast() event caught twice in controller

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

Comments

[Chandermani]

Most probably two instances of the controller are active. One common reason is use of $routeProvider controller and ng-controller on the same view.

[Pratibha]

so how to resolve it? can you please help me?

[Martin]

Do you have your controller instantiated in view with ng-controller as Chandermani suggested? If so, remove the ng-controller attribute. Instantiating the controller with ng-controller, uirouter and ngRouter is a one OR the other choice. If you instantiate the controller twice you will have two instances of it.

[Pratibha]

@Chandermani : thank you :) its working. I am giving controller in uirouting only and it works :)

[Chandermani]

Let me add it as answer so that the question marked answered and I can take some credit :)

[gkalpak]

@user59442: Your first statement is valid and good for a comment. But your last statement is wrong. This is not an answer.

[Srikanth Jeeva]

removed ng-controller declaration in html as I have already added it as state setup in router. Things works fine now. Thank you!

[k102]

this helped me for some reason

[Hamza Ouaghad]

What does the opinion have to do with the real behavior, those are matters of facts and you should provide an answer based on some kind of concrete factual knowledge, not based on a personal opinion.

[MilesStanfield]

this helped me.