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

Question

我正在努力让 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 下的视频和曲目标签。

changeCaption() 在用户更改隐藏式字幕设置时从 UI 调用。

我无法从 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

我不明白为什么我不能在 link 函数中引用轨道元素，但我可以在控制器中引用。我可以从控制台看到它列在 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

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

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

javascript

jquery

dom

angularjs

videogular