javascript - 为什么我无法获得在AngularJS Videogular中可以看到的元素的引用？

我正在努力使videogular-subtitle-plugin与最新版本的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在vg-media下生成视频和跟踪标签。

当用户更改隐藏字幕设置时，会从UI调用changeCaption（）。

我无法从link：函数引用轨道标记。但是，我能够在代码中看到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

我不明白为什么我不能在链接函数中引用track元素，但可以在控制器中引用。我可以从控制台在childNodes中看到它。我已经在Linux下的Chrome和Firefox中复制了此内容。

显然，修复它意味着只需要在控制器中进行查找即可，但是我想了解我在这里缺少的内容。可能是因为它处于不完整状态吗？还是控制台对我撒谎，并且执行过程中那时还不存在track标签？

最佳答案

您可以注意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