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

发布时间：2020-12-17 10:20:20 所属栏目：安全来源：网络整理

导读：我无法捕获像这样发送的事件： document.body.dispatchEvent(event); 下面的指令是在一个div,在身体内： .directive('myDirective',function(){ return { restrict: 'A',link: function(scope,element,attrs,pageCtrl){ element.bind('myEvent',function(){

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

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的指令中捕获这些事件吗？

问题在于事件冒泡,这意味着当您从document.body发送事件时,它会通过其祖先传播.由于它不会通过它的后代传播,因此你的指令的事件监听器永远不会被触发.

但是,您可以使用Angular的内部事件系统捕获身体上的事件并触发您的div.

创建两个指令

一个用以下行为装饰body元素：

>抓住科尔多瓦事件,然后……
>从rootScope广播Angular-internal事件

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

…和另一个用捕获Angular事件的行为来装饰div：

.directive('divDirective',attrs) {
      scope.$on('cordovaEvent',function(){
        // do something here
      }); 
    }
  } 
})

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!