html5 视频结束时调用 AngularJS 控制器函数
Calling AngularJS controller function when html5 video ends
我的应用程序主页上有一段视频,当我启动它时会播放。当视频结束时,我想使用一些 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");
}
});
如果我在 <video onended="">
元素中放置一个 console.log()
,它会打印出来。如果我尝试调用包含相同 console.log 的 ctrl.video()
,我会收到以下错误:
Uncaught ReferenceError: ctrl is not defined
我知道 ctrl 已定义,因为如果我添加 ng-click="ctrl.video()"
并单击它打印出来的视频播放器。
我对 Angular 有点陌生,所以我不知道修复它的最佳方法,但我至少可以告诉你为什么它不起作用。
ng-click="ctrl.video()"
有效,因为 ctrl 是在控制器的范围内定义的。控制器范围内的所有 ng- 属性 运行。但是 onended 是一个常规的内置 HTML5 事件处理程序属性,因此它 运行 在全局 Javascript 范围内,而不是控制器的范围内。那里没有定义 ctrl。
(我不确定 var ctrl = this;
如何导致在控制器范围内定义 ctrl,但显然它确实如此。仍在学习 Angular...)
最终我所做的是使用 Angular UI Utils,它有一个通用的事件绑定器。这让我可以绑定到 AngularJS 没有开箱即用的事件。使用以下行 ui-event="{ ended : 'ctrl.video()'}"
我能够在视频结束时调用我的函数,这给了我想要的行为。
我的应用程序主页上有一段视频,当我启动它时会播放。当视频结束时,我想使用一些 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");
}
});
如果我在 <video onended="">
元素中放置一个 console.log()
,它会打印出来。如果我尝试调用包含相同 console.log 的 ctrl.video()
,我会收到以下错误:
Uncaught ReferenceError: ctrl is not defined
我知道 ctrl 已定义,因为如果我添加 ng-click="ctrl.video()"
并单击它打印出来的视频播放器。
我对 Angular 有点陌生,所以我不知道修复它的最佳方法,但我至少可以告诉你为什么它不起作用。
ng-click="ctrl.video()"
有效,因为 ctrl 是在控制器的范围内定义的。控制器范围内的所有 ng- 属性 运行。但是 onended 是一个常规的内置 HTML5 事件处理程序属性,因此它 运行 在全局 Javascript 范围内,而不是控制器的范围内。那里没有定义 ctrl。
(我不确定 var ctrl = this;
如何导致在控制器范围内定义 ctrl,但显然它确实如此。仍在学习 Angular...)
最终我所做的是使用 Angular UI Utils,它有一个通用的事件绑定器。这让我可以绑定到 AngularJS 没有开箱即用的事件。使用以下行 ui-event="{ ended : 'ctrl.video()'}"
我能够在视频结束时调用我的函数,这给了我想要的行为。