2015-03-10 16 views
5

Tôi có một video trên trang chủ của ứng dụng phát khi khởi chạy. Khi video kết thúc, tôi muốn sử dụng một số chuyển tiếp CSS 3 để di chuyển trang.Gọi chức năng điều khiển AngularJS khi video html5 kết thúc

<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> 

Ở cuối video, tôi muốn có thể gọi hàm angularJS Controller.

'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(); 

}); 

điều khiển của tôi trông giống như:

'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"); 

    } 

}); 

Nếu tôi đặt một console.log() trong các yếu tố <video onended=""> nó in nó ra. Nếu tôi cố gắng và gọi ctrl.video() chứa console.log cùng tôi nhận được lỗi sau:

Uncaught ReferenceError: ctrl is not defined

Tôi biết rằng ctrl được định nghĩa bởi vì nếu tôi thêm một ng-click="ctrl.video()" và tôi nhấp vào video player nó in ra.

+0

Bạn có biết vấn đề thực sự là gì không. –

Trả lời

6

Cuối cùng những gì tôi đã làm là sử dụng Angular UI Utils trong đó có một sự kiện chung chất kết dính. Điều này cho phép tôi liên kết với một sự kiện mà AngularJS không ra khỏi hộp. Sử dụng dòng sau ui-event="{ ended : 'ctrl.video()'}" Tôi đã có thể gọi chức năng của mình khi video kết thúc đã cho tôi hành vi mong muốn.

2

Tôi hơi mới với Angular, vì vậy tôi không biết cách tốt nhất để khắc phục nó, nhưng ít nhất tôi cũng có thể cho bạn biết tại sao nó không hoạt động.

ng-click="ctrl.video()" hoạt động vì ctrl được xác định trong phạm vi của bộ điều khiển. Tất cả các thuộc tính chạy trong phạm vi của bộ điều khiển. Nhưng được đề cập là thuộc tính xử lý sự kiện HTML5 được tích hợp thông thường, do đó nó chạy trong phạm vi Javascript toàn cục, không phải phạm vi của bộ điều khiển. Không có ctrl nào được xác định ở đó.

(Tôi không chắc chắn như thế nào var ctrl = this; gây ctrl phải được xác định trong phạm vi của bộ điều khiển, nhưng dường như nó. Tuy nhiên việc học kiễu góc ...)

Các vấn đề liên quan