Calling AngularJS controller function when html5 video ends

Question

I have a video on the homepage of my app which plays when I launch it. When the video ends I\'d then like to use some CSS 3 transitions to move the page around.

Answer 1

I'm a bit new to Angular, so I don't know the best way to fix it, but I can at least tell you why it isn't working.

ng-click="ctrl.video()" works because ctrl is defined in the controller's scope. All ng- attributes run within the controller's scope. But onended is a regular built-in HTML5 event handler attribute, so it runs in the global Javascript scope, not the controller's scope. There's no ctrl defined there.

(I'm not sure how var ctrl = this; causes ctrl to be defined in the controller's scope, but apparently it does. Still learning Angular...)

Answer 2

Eventually what I did was use Angular UI Utils which has a generic event binder. This allowed me to bind to an event that AngularJS doesn't out of the box. Using the following line ui-event="{ ended : 'ctrl.video()'}" I was able to call my function when the video ended which gave me the desired behaviour.