javascript - 在 Angular Controller 中监听文档事件

Question

如何在angular的 Controller 中捕捉事件？

我有文档级事件，所以我需要在 Angular Controller 中捕获事件，这可能吗？

更新

我有独立的 js 文件来处理来自相机的一些 Action 。

document.addEventListener('myCameraEvent', handleMyCameraEvent);

我想在 Angular Controller 或指令中触发此事件。谁能解释一下，怎么可能用 Angular 来实现？

Answer 1

这是一个通用的自定义事件观察者服务:

.service('Camera', function($document) {

  //map of current subscribers
  var subscribers = {};

 //notifies all subscribers of particular event type
 function notify(event) {
    var handlers = subscribers[event.type] || [];
    for (var i = 0; i < handlers.length; i++) {
      handlers(i)(event);
    }
  }
  //adds new handler to subscribers list
  //returns object with unsubscribe() method
  this.subscribe(eventType, handler) {
     var handlers = subscribers[eventType] || [];
     handlers.push(handler);
     return (function(type, index) {
       return {
         unsubscribe: function() {
           subscribers[type].splice(index);
         }
       }
     })(eventType, handlers.length - 1);
  }

  //register custom events
  $document.on('myCameraEvent', function(event) {
    notify(event);
  });

  $document.on('myOtherCameraEvent', function(event) {
    notify(event);
  });

});

在你的 Controller 中，你会像这样使用它:

.controller('MyCtrl', function($scope, Camera) {
  subscriber = Camera.subscribe('myCustomEvent', customEventHandler);
  function customEventHandler(event) {
    //process event
    //..

    //if handler is not needed anymore, unsubscribe
    //subscriber.unsubscribe();
  }

})

当然，这只是一般的想法。您可能希望在 Camera 服务上有特定的方法，例如 Camera.onSnapshot(snapshotandler); Camera.onTurnOff(turnOffHandler); 会将处理程序注册到特定事件以抽象出事件名称。