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下生成视频和曲目标签。

当用户更改隐藏字幕设置时，从UI调用

changeCaption（）。

我无法从链接：function中引用track标记。但是，我能够在代码中的那一点看到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中重现了这一点。

显然，修复它意味着只需在控制器中进行查找，但我想了解我在这里缺少的内容。可能是因为它处于一些不完整的状态吗？或是控制台对我说谎，并且执行中的那个时刻轨道标签不存在？

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

为什么我不能获得对AngularJS Videogular中可以看到的元素的引用？

1 个答案: