我在应用程序的主页上有一个视频，该视频在启动时会播放。视频结束时，我想使用一些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()"然后单击视频播放器，它将打印出来。
最终，我所做的是使用具有通用事件绑定程序的Angular UI Utils。这使我可以绑定到AngularJS不会开箱即用的事件。使用下一行，ui-event="{ ended : 'ctrl.video()'}"我可以在视频结束时调用我的函数，这给了我所需的行为。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句