如何侦听Angularjs中的本地和自定义javascript事件

Question

我试图在AngularJs控制器中获取本地javascript事件侦听器。我没有试图解释为什么，但我不知道如何解决这一问题。

我创建了这样的自定义事件：

var event = document.createEvent('HTMLEvents');
event.initEvent('custom-event', true, true);
document.dispatchEvent(event);

在角度控制器内：

angular.module('uploadCtrl', [])
  .controller('uploadController', ['$scope', '$window', '$compile', function($scope, $window, $compile, $http, Video) {
    document.addEventListener('custom-event', function(e) {
      console.log('event received');
    })
  }]);

我做错什么了？谢谢

Answer 1

请记住，在DOM准备好之前，控制器代码不会执行。如果没有更多的代码，很难具体说明您的问题是什么，但我敢打赌，在控制器连接到侦听器之前，您将启动该事件。看看这个，这很管用。

(function(window, angular) {
  'use strict';

  angular.module('Test', [])
    .controller('UploadCtrl', ['$window', function($window) {
      $window.document.addEventListener('custom-event', function(e) {
      $window.console.log('event received');
    });
  }]);

  window.setTimeout(() => {
    const event = document.createEvent('HTMLEvents');
    event.initEvent('custom-event', true, true);
    document.dispatchEvent(event);
  }, 0);
})(window, window.angular);

请注意，此代码仅用于演示目的。setTimeout‘仅用于显示事件侦听器将处理该事件，并且OP的代码正处于争用状态。