How to listen native and custom javascript events inside Angularjs

Question

I'm trying to get a native javascript event listener inside an AngularJs controller. I don't try to explain why but I cant' understand how to solve this.

I've created the custom event like this:

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

and inside the angular controller:

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

What I'm doing wrong? Thanks

benbotto · Accepted Answer · 2018-06-07 15:57:47Z

1

Keep in mind that the controller code is not going to execute until the DOM is ready. Without more code, it's hard to say what your issue is specifically, but I'll bet that you're firing off that event before the controller's wired up a listener. Take a look at this, which works.

(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);

Note that this code is just for demonstration purposes. The setTimeout' is only used to show that the event listener will handle the event, and that the OP's code is suffering from a race condition.

edited Jun 7, 2018 at 15:57

answered Feb 9, 2018 at 23:26

benbotto

2,4491 gold badge23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Angus Simons Over a year ago

Thanks to your answer, I've noticed that I didn't load the controller inside the application. Thanks mate

benbotto Over a year ago

No problem. If my answer helped, please consider marking it as the answer.

Collectives™ on Stack Overflow

How to listen native and custom javascript events inside Angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related