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?

Most probably two instances of the controller are active. One common reason is use of `$routeProvider` controller and `ng-controller` on the same view. — Chandermani, Sep 11 '14 at 13:16
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. — Martin, Sep 12 '14 at 08:46
@Chandermani : thank you :) its working. I am giving controller in uirouting only and it works :) — Pratibha, Sep 12 '14 at 09:02
Let me add it as answer so that the question marked answered and I can take some credit :) — Chandermani, Sep 12 '14 at 09:52

score 44 · Accepted Answer · edited Mar 30 '17 at 20:34

44

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.

edited Mar 30 '17 at 20:34

Dominic Aquilina

617
3
13

answered Sep 12 '14 at 09:54

Chandermani

42,589
12
85
88

1

removed ng-controller declaration in html as I have already added it as state setup in router. Things works fine now. Thank you! – Srikanth Jeeva Jul 28 '15 at 19:04

Johannes · Answer 2 · 2014-09-12T08:03:40.383

10

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.

edited Sep 12 '14 at 08:03

answered Sep 11 '14 at 13:14

Johannes

2,732
5
23
32

@user59442: Your first statement is valid and good for a comment. But your last statement is wrong. This is not an answer. – gkalpak Sep 11 '14 at 13:57
this helped me for some reason – k102 Sep 11 '15 at 08:20
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. – Hamza Ouaghad Jul 22 '16 at 18:00

score 4 · Answer 3 · edited May 30 '16 at 12:08

4

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

edited May 30 '16 at 12:08

Toby Speight

27,591
48
66
103

answered May 30 '16 at 11:46

Shaik Subhani

41
2

1

this helped me. – MilesStanfield Oct 09 '16 at 01:54

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

3 Answers3

Linked