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

问题是事件 bubble ，这意味着当你从document.body发送事件时，它会通过它的祖先传播 up 。因为它不会通过它的后代传播，所以你的指令的事件监听器永远不会被解雇。

然而，您可以使用Angular的内部事件系统捕捉身体上的事件并触发你的div。

创建两个指令

使用以下行为装饰body元素：

抓住Cordova事件，然后......
从rootScope广播Angular-internal事件

.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（您必须在单独的窗口中查看预览并在那里观看控制台）

如何绑定到angularjs指令中的自定义事件？

1 个答案:

创建两个指令