Question

该指令应该监视scope.tutorialNumber变量的变化（随着用户在教程中的进展而增加），然后使用tutorialNumber作为数组videoURLs的索引加载新视频，然后替换第一个这是硬编码到HTML中。但是，当更新tutorialNumber时，$ watch似乎根本没有被触发。为什么呢？

<video data-setup="{'techOrder': ['html5', 'flash']}"  class="video-js vjs-default-skin" id="myvideo" video-loader="tutorialNumber" id="video" controls>
    <source type="video/mp4" src="file:///C:/Users/Dell/Desktop/grammar%20game/ㅗㅏregular.mp4"></source> 
    Your browser does not support the video tag.
</video>

.directive('videoLoader', function(){
    return function (scope, element, attrs){
            scope.$watch(scope.tutorialNumber, function(){          
                //element.load();           
                scope.video.src(scope.videoURLs[scope.tutorialNumber]);
                scope.video.ready(function(){
                scope.video.play();
                $(scope.video).bind('ended', function(){
                    $(scope.video).unbind('ended');
                    if (!scope.video.ended) {
                        return;
                    }
                    scope.tutorialNumber++;
                    scope.$apply();
                    scope.loadFromMenu();
                });
            });
        });
    }
});

Answer 1

您应该将$ watch表达式编写为：

scope.$watch('tutorialNumber', function(){ ...

或

scope.$watch(function(){return scope.tutorialNumber;}, function(){ ...

Answer 2

我读错了，或者您的范围参考是否写错了？

在大多数情况下，您列出了scope，但常见的Angular引用是$scope。

此外，还有$rootScope这样的事情。您可以利用$rootScope将值返回给应用程序（模型）的父级，然后在指令或模块内部使用$ scope来划分数据。

在angular.js指令中使用video.js

2 个答案: