Why can I not get a reference to an element I can see in AngularJS Videogular?

Question

I am working on getting the videogular-subtitle-plugin to work with the latest version of Videogular/AngularJS. I am new to AngularJS so I am assuming there is something stupid simple that I am just not understanding.

I am running into an issue in a directive:

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

         ......

The relevant markup is:

<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 generates the video and track tags under vg-media.

changeCaption() is called from the UI when the user change the closed captioning setting.

I am unable to reference the track tag from the link: function. However, I am able to see the element from console.log output at that point in the code, which is confusing me.

I have recreated the problem here. Open the javascript console and load:

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

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

I do not understand why I can't reference the track element in the link function but I can in the controller. I can see it listed in childNodes from the console. I've reproduced this in Chrome and Firefox under Linux.

Obviously, fixing it means simply doing the lookup in the controller but I would like to understand what I am missing here. Is it possibly because it's in some incomplete state? Or is the console lying to me and the track tag does not exist at that point in the execution?

Answer 1

You can watch for API.isReady property:

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 with demo: http://codepen.io/2fdevs/pen/bdmJyd?editors=001