Angular on video upload event

Question

I'm still trying to understand angular ...

Basically, I have an html5 video and I want to listen to the event onloadeddata( http://www.w3schools.com/jsref/event_onloadeddata.asp ).

This is what I have:

HTML:

<video autoplay="autoplay" loaded-data loop style="display: none;">
  <source src="videos/example.mp4" type="video/mp4">
  <source src="videos/example.ogg" type="video/ogg">
</video>

directive:

angular.module('myApp')
  .directive('loadedData', function () {
    return function ($scope, $element) {
      $element.addEventListener("loadeddata", function () {
        console.log('test'); // never calls
      });
    }
});

Is this the right way to handle this? For some reason, an event listener is never called.

I also tried

$element.bind('loadedData', function () {
    console.log('test');
});

but it also does not work ...

Answer 1

I thought! It looks like I need to use:

$element[0].addEventListener(...)

Instead:

$element.addEventListener(...)

Answer 2

$element.on('loadeddata', function (event) {
   var width = $element[0].videoWidth;
}

'loadeddata' works for me 'loadedData' is not