AngularJS: directive multiple time on page and emit/broadcast handling

Question

I have such strange issue:

When in my view i have declared directive 2 (and more) times i get such magic:

controller:

      $scope.$broadcast('slideableClose');

and directive:

      scope.$on('slideableClose', function(event) {
        console.log('slideableClose');
        action();
      });

and when i broadcast my data, i see in console that it is called twice

how can i call it only one time, becouse it must be fired only once, but i need multiple directives on my page?

I am assuming both the directives are associated to the same controller, correct? — ArslanW, Aug 19 '15 at 13:13

score 1 · Answer 1 · answered Aug 19 '15 at 13:27

Hmm, I have a way which can be used to accomplish firing only once, but it requires maintenance and two way binding between your controller and directives for this variable.

You could define a scope variable:

isHandled = false

Now whenever the event is fired, set this value to false and make your handler something like this:

scope.$on('slideableClose', function(event) {
    if (isHandled) {
      return;
    }
    console.log('slideableClose');
    action();
  });

Now if this event is already handled it won't be handled again. Otherwise it will be handled. Remember to set this variable to false when the event itself is fired or before it's fired.

AngularJS: directive multiple time on page and emit/broadcast handling

1 Answers1