कॉलिंग AngularJS नियंत्रक फ़ंक्शन जब html5 वीडियो

Question

समाप्त होता है मेरे पास मेरे ऐप के मुखपृष्ठ पर एक वीडियो है जो इसे लॉन्च करते समय चलाता है। जब वीडियो समाप्त होता है तो मैं पृष्ठ को चारों ओर स्थानांतरित करने के लिए कुछ सीएसएस 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> 

वीडियो के अंत में मैं एक कोणीय जेएस नियंत्रक समारोह को कॉल करने में सक्षम होना चाहता हूं।

'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() डाल यह यह प्रिंट आउट:

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

}); 

मेरे नियंत्रक की तरह दिखता है। अगर मैं कोशिश करते हैं और 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()'}" का उपयोग करके मैं अपने फ़ंक्शन को कॉल करने में सक्षम था जब वीडियो समाप्त हुआ जिसने मुझे वांछित व्यवहार दिया।

Answer 2

मैं कोणीय के लिए थोड़ा नया हूं, इसलिए मुझे इसे ठीक करने का सबसे अच्छा तरीका नहीं पता, लेकिन मैं कम से कम आपको बता सकता हूं कि यह क्यों काम नहीं कर रहा है।

ng-click="ctrl.video()" काम करता है क्योंकि ctrl को नियंत्रक के दायरे में परिभाषित किया जाता है। सभी एनजी-गुण नियंत्रक के दायरे में चलते हैं। लेकिन एक नियमित रूप से निर्मित एचटीएमएल 5 इवेंट हैंडलर विशेषता है, इसलिए यह वैश्विक जावास्क्रिप्ट स्कोप में चलता है, न कि नियंत्रक के दायरे में। वहां कोई ctrl परिभाषित नहीं है।

(मुझे यकीन है कि कैसे var ctrl = this; ctrl का कारण बनता है नियंत्रक के दायरे में परिभाषित किया जा करने के लिए नहीं कर रहा हूँ, लेकिन जाहिरा तौर पर यह होता है। फिर भी कोणीय सीखने ...)