Angular - broadcast , $on called multiple times in directive

Question

I am working on a single page app, with angular and I have a need to communicate between 2 different directives which basically don't have a parent child relation.

In Directive A, I have 2 places where I need to broadcast same event from different functions. And in Directive B, have written a $on listener for that.

Now, I observe that the whenever callFirstFunc & its broadcast is called for first time, the listener will be called once. Upon subsequent calling, the listener is called twice, thrice and so on ,it keeps on increasing.

The callSecondFunc is called when the callFirstFunc has been executed, so the listener for this is also called as many no. of times the listener for broadcast in callFirstFunc. So, why is the listener not called only once, why multiple times? It is looping and increasing every time.

Directive A:

app.directive("firstDir", function ($rootScope) {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            // some other code
            callFirstFunc();
            var callFirstFunc = function(){
                // some other code
                $rootScope.$broadcast("someEvent");
            }
            callSecondFunc();
            var callSecondFunc = function(){
                // some other code
                $rootScope.$broadcast("someEvent");
            }
        }
    };
});

Directive B:

app.directive("secondDir", function ($rootScope) {
        return {
            restrict: 'E',
            link: function (scope, element, attrs) {
                // some other code
                scope.$on("someEvent", function(){
                    detectSTuff();
                }) 
               function detectStuff(){
                  // other code
               }                    
            }
        };
    });

Possible duplicate of AngularJs broadcast repeating execution too many times — kinkajou
– kinkajou, Commented Jan 18, 2017 at 1:30

Rabi · Accepted Answer · 2014-11-06 10:05:06Z

1

I think you forgot to unbind the even handler.

You can do it like following -

var someEventHandle = scope.$on("someEvent", function(){
                    detectSTuff();
                });
scope.$on('$destroy', someEventHandle);

answered Nov 6, 2014 at 10:05

Rabi

2,23019 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

whyAto8 Over a year ago

Rabi - I tried, but its still the same. Its listening more than once and keeps on increasing.

Walter White · Accepted Answer · 2019-02-04 15:42:27Z

0

This code works for me:

$rootScope.$$listeners.nameOfYourEvent.length = 1;

answered Feb 4, 2019 at 15:42

Walter White

1,0244 gold badges15 silver badges34 bronze badges

Collectives™ on Stack Overflow

Angular - broadcast , $on called multiple times in directive

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related