如何在AngularJS指令中绑定自定义事件？

Question

我有一个问题，无法捕获这样发送的事件：

document.body.dispatchEvent(event);

以下指令位于一个div内，位于body标签中：

.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应用程序的，使用现有插件，在文档主体上分派事件。那么，有没有其他方法可以在div上的指令中捕获这些事件？

- AgDude

---

首先，在您的情况下是否有必要使用DOM来发出和响应事件？我之所以问这个问题，是因为在Angular本身中有几种方法可以跨应用程序进行通信，包括Angular自己的内部事件系统。 - Marc Kline

Answer 1

问题在于事件会冒泡，也就是说当你从document.body分派事件时，它会通过其祖先向上传播。由于它不会通过其后代向下传播，因此您的指令事件侦听器永远不会被触发。

但是，您可以在body上捕获事件，并使用Angular的内部事件系统将其发送到您的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（您必须在单独的窗口中查看预览并在控制台中查看）

- Marc Kline

---

@mark，谢谢。那绝对是我正在面临的问题。请看我的更新。 - AgDude

更新了我的答案，提供了一种在您的 div 上捕获事件的方法。 - Marc Kline

你的更新很棒。感谢你在Plunker上提供的控制台提示。 - AgDude