How do I bind to a custom event in an angularjs directive?

Question

I am having trouble catching an event which is sent like this:

document.body.dispatchEvent(event);

The directive below is on a div, inside the body:

.directive('myDirective',function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs, pageCtrl){

      element.bind('myEvent', function(){
        console.log('caught my event!');
      });
    }
  };
});

This works if the event is sent with triggerHandler on the div.

event = new Event('myEvent');
elem.triggerHandler(event);

How can I catch a custom event on the document body inside a directive?

Update: This is for use in a Cordova app, with an existing plugin, which dispatches events on document.body. So is there another way I can catch those events in a directive on a div?

First, is it necessary in your case to use the DOM to emit and respond to events? I ask because there are a few ways in Angular itself to communicate across your app, including Angular's own internal event system. — Marc Kline
– Marc Kline, Commented May 6, 2014 at 23:55

Marc Kline · Accepted Answer · 2014-05-07 15:02:52Z

7

The problem is that events bubble, meaning when you dispatch the event from document.body, it propagates up through its ancestors. Since it doesn't travel down through its descendants, your directive's event listener is never fired.

You can, however, catch the event on body and fire to your div using Angular's internal event system.

Create two directives

One to decorate the body element with the following behavior:

catches the Cordova event, then...
broadcasts an Angular-internal event from rootScope

.directive('bodyDirective',function($rootScope){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
      element.bind('myEvent', function(){
        $rootScope.$broadcast('cordovaEvent');
      });
    }
  };
})

... and another to decorate the div with behavior that will catch the Angular event:

.directive('divDirective', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      scope.$on('cordovaEvent', function(){
        // do something here
      }); 
    }
  } 
})

Plunker (you must view the preview in a separate window and watch console there)

edited May 7, 2014 at 15:02

answered May 7, 2014 at 1:05

Marc Kline

9,4091 gold badge35 silver badges36 bronze badges

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

3 Comments

AgDude Over a year ago

@mark, Thanks. That is absolutely the problem I am facing. Please see my update.

Marc Kline Over a year ago

Updated my answer with a way to catch to catch the event on your div

AgDude Over a year ago

Your update works great. And thanks for the console tip on Plunker.

Collectives™ on Stack Overflow

How do I bind to a custom event in an angularjs directive?

1 Answer 1

Create two directives

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Create two directives

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related