Почему я не могу получить ссылку на элемент, который я вижу в AngularJS Videogular?

Question

Я работаю над тем, чтобы использовать видеоглаз-субтитры для работы с последней версией Videogular/AngularJS. Я новичок в AngularJS, поэтому я предполагаю, что есть что-то глупое простое, что я просто не понимаю.

Я бегу на вопрос в директиве:

angular.module("videogular.texttrack", []) 
     .directive("vgText", [function() { 

    controller: ["$scope", function($scope) { 

     $scope.changeCaption = function(track) { 
      var tag = $scope.trackTag[0]; 

      // I can get the track tag here. 

      console.log("mediaElement is", $scope.mediaElement); 

      $scope.trackTag = angular.element($scope.mediaElement).find("track"); 

      console.log("trackTag is", $scope.trackTag); 

      ...... 

     link: function(scope, elem, attr, API) { 


     // why can't I reference the track tag here? 

     scope.trackTag = angular.element(API.mediaElement).find("track"); 

     console.log("mediaElement is", API.mediaElement); 

     // trackTag is empty here. I do not understand why. 

     console.log("trackTag is", scope.trackTag); 

     scope.mediaElement = API.mediaElement 

     ...... 

Соответствующая разметка:

<videogular vg-theme="config.theme" 
    vg-player-ready="onPlayerReady($API)"> 
    <vg-media vg-src="config.sources" 
     vg-tracks="config.tracks"> 
    </vg-media> 
    ..... 
    <vg-text vg-text-src="config.plugins.subtitle"></vg-text> 

Videogular генерирует видео и трек теги под ВГ-медиа.

changeCaption() вызывается из пользовательского интерфейса, когда пользователь меняет настройку закрытых субтитров.

Я не могу ссылаться на тэг с ссылкой: function. Тем не менее, я могу видеть элемент из вывода console.log в этот момент кода, что меня сбивает с толку.

Я воссоздал проблему здесь. Откройте консоль JavaScript и нагрузки:

http://miles-by-motorcycle.com/static/videogular-subtitle-plugin/app/#/

См http://miles-by-motorcycle.com/static/videogular-subtitle-plugin/text-track.js

Я не понимаю, почему я не могу ссылаться на элемент дорожки в функции связи, но я могу в контроллере. Я вижу, что он указан в childNodes с консоли. Я воспроизвел это в Chrome и Firefox под Linux.

Очевидно, что исправление означает просто выполнение поиска в контроллере, но я хотел бы понять, чего я здесь не вижу. Возможно, потому что это в некотором неполном состоянии? Или консоль, лежащая ко мне, и тег дорожки не существует в этот момент выполнения?

Answer 1

Вы можете следить за API.isReady собственности:

link: function(scope, elem, attrs, API) { 
    console.log(API.mediaElement); 

    scope.onClickReplay = function() { 
     API.play(); 
    }; 

    scope.onPlayerReady = function(newVal) { 
     if (newVal) { 
      console.log("onPlayerReady", API.mediaElement); 
     } 
    }; 

    scope.$watch(
     function() { 
      return API.isReady; 
     }, 
     scope.onPlayerReady.bind(scope) 
    ); 
} 

Codepen с демо: http://codepen.io/2fdevs/pen/bdmJyd?editors=001