angularjs - 如何绑定(bind)到 angularjs 指令中的自定义事件？

Question

我无法捕获这样发送的事件:

document.body.dispatchEvent(event);

下面的指令位于主体内部的 div 上:

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

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

如果事件是通过 div 上的 triggerHandler 发送的，则此方法有效。

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

如何在指令内的文档正文上捕获自定义事件？

更新:
这是在 Cordova 应用程序中使用的，带有一个现有的插件，该插件在 document.body 上调度事件。那么有没有另一种方法可以在 div 的指令中捕获这些事件？

Answer 1

问题是事件冒泡，这意味着当您从 document.body 分派(dispatch)事件时，它会通过其祖先传播。由于它不会通过其后代传播，因此您的指令的事件监听器永远不会被触发。

但是，您可以使用 Angular 的内部事件系统在 body 上捕获事件并触发到您的 div。

创建两个指令

一来装修body具有以下行为的元素:

捕获 Cordova 事件，然后...

从 rootScope

广播 Angular 内部事件

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

...和另一个来装饰 div具有将捕获 Angular 事件的行为:

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

Plunker (您必须在单独的窗口中查看预览并在那里观看控制台)