当html5视频结束时调用AngularJS控制器功能

Question

我在我的应用的主页上有一个视频,当我启动它时播放.当视频结束时,我想使用一些CSS 3过渡来移动页面.

<ion-view  hide-back-button="true" title="">
    <ion-pane>
        <div class="home-video">
            <video autoplay="autoplay" ng-click="ctrl.video()" aria-label="video of IBM logo" tabindex="-1" aria-hidden="true" poster="images/Hero_Final_Placeholder.gif" onended="ctrl.video()">
                <source src="videos/video.mp4" type="video/mp4">
                <img src="images/video_backup.gif" title="Your browser does not support the video tag.">
            </video>
        </div>
    </ion-pane>
</ion-view>

在视频结束时,我希望能够调用angularJS控制器功能.

'use strict';

angular.module('app', ['ionic']).config(function ($stateProvider, $urlRouterProvider) {

$stateProvider.state('home', {
  url: "/home",
  templateUrl: 'views/home.html',
  controller: 'homeCtrl as ctrl'
}).state('project', {
  url: "/project/:projectId",
  templateUrl: 'views/project.html',
  controller: 'projectCtrl'
});

 // Default view to show
$urlRouterProvider.when('', '/home');

}).run(function ($http, pouchDB, replicationService, $rootScope) {

  replicationService.replicate();

});

我的控制器看起来像:

'use strict';

var app = angular.module('app', false);

app.controller('homeCtrl', function ($rootScope){

this.data = {};

var ctrl = this;

    this.video = function () {

        console.log("video done");

    }

});

如果我console.log()在<video onended="">元素中放入一个,则将其打印出来.如果我尝试调用ctrl.video()哪个包含相同的console.log,我会收到以下错误:

Uncaught ReferenceError: ctrl is not defined

我知道ctrl是定义的,因为如果我添加一个ng-click="ctrl.video()"并且我点击它打印出来的视频播放器.

Answer 1

最后我做的是使用Angular UI Utils,它有一个通用的事件绑定器.这允许我绑定到AngularJS没有开箱即用的事件.使用以下行,ui-event="{ ended : 'ctrl.video()'}"我可以在视频结束时调用我的功能,这给了我所需的行为.