0

我正在努力让 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()。

我无法从链接中引用轨道标签：函数。但是，我可以在代码中看到来自 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 中重现了这一点。

显然，修复它意味着只需在控制器中进行查找，但我想了解我在这里缺少什么。可能是因为它处于某种不完整的状态？还是控制台对我撒谎，并且在执行时不存在轨道标签？

4

1 回答 1

2

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

于 2015-07-27T13:02:45.797 回答