How do I bind to a custom event in an angularjs directive?
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)
AgDude
Updated on June 28, 2022Comments
-
AgDude about 2 years
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?
-
AgDude about 10 years@mark, Thanks. That is absolutely the problem I am facing. Please see my update.
-
Marc Kline about 10 yearsUpdated my answer with a way to catch to catch the event on your div
-
AgDude about 10 yearsYour update works great. And thanks for the console tip on Plunker.