2

假设这个手表在一个指令中，是否可以像这样从主控制器观察一个变量？这是整个指令。当它看起来像这样时，手表确实会在第一页加载时触发，但之后再也不会触发。我没有将 questionNumber 传递给指令。这就是它不知道的原因吗？

    .directive('videoLoader', function () {
return function (scope, element, attrs) {
    scope.$watch(attrs.videoLoader, function () {
        element[0].load();
        element[0].play();
        $(scope.video).bind('ended', function () {
            $(this).unbind('ended');
            if (!this.ended) {
                return;
            }
            scope.tutorialNumber++;
            scope.$apply();
            scope.loadFromMenu();
        });
    });
    scope.$watch(scope.questionNumber, function(){
        if (scope.sectionNumber === 0 && scope.tutorialNumber === 0) { //if first video play congratulations etc
            if (scope.questionNumber === 1) {
                start(164.15);
                pause(166.8);
            } else if (scope.questionNumber === 2) {
                start(167.1);
                pause(170);
            } else if (scope.questionNumber === 3) {
                start(171.1);
            }
        }
    });
}

})

4

3 回答 3

3

scope.$watch('questionNumber', function(newValue, oldValue){//something}. 在发布这个之前我没有尝试过一个例子，但我记得以前试过这样。

请注意，scope.$watch(scope.questionNumber...现在scope.$watch('questionNumber'...

于 2013-03-02T08:41:43.273 回答
3

由于您的指令没有创建新范围或隔离范围，因此它使用在 HTML 中使用该指令的位置受到影响的范围。如果controls是一个指令并且它创建了一个新的或隔离的范围，那么 video-loader 指令也将使用该范围。这可以解释为什么@rajkamal 的答案对您不起作用。

如果controls不是指令，那么 video-loader 将使用控制器的作用域（除非您在 ng-repeat 或其他创建子作用域的指令中有 video-loader。）如果不向我们展示更多 HTML，这是不可能的以确定您的指令将获得什么范围。

这是一个 plunker，显示了在控制器范围内使用的 video-loader 指令如何访问该范围（特别是questionNumber属性）。

尽管习惯 jsfiddle 和 plunker 可能需要一些时间，但我强烈建议您花时间。如果您有 jsfiddle 或 plunker，人们可以更快地帮助您。

于 2013-03-03T00:08:28.667 回答
0

哈利路亚我做到了！答案是否定的，显然指令无法进入其他控制器的范围，它们必须通过 HTML 中的属性传递，这对只有一个属性很好，但我很难获得 2，结果它可以这样做

<video video-loader class="video-js vjs-default-skin" id="myvideo" congrats="questionNumber" video-loader="tutorialNumber" id="video" controls>
    <source type="video/mp4" src="{{videoURLs[tutorialNumber]}}.mp4"></source>
    <source type="video/webm" src="{{videoURLs[tutorialNumber]}}.webm"></source>
    Your browser does not support the video tag.
</video>

然后使用第二个 $watch 在指令内部访问，如下所示：

directive('videoLoader', function () {
    return function (scope, element, attrs) {
        scope.$watch(attrs.videoLoader, function () {
            element[0].load();
            element[0].play();
            $(scope.video).bind('ended', function () {
                $(this).unbind('ended');
                if (!this.ended) {
                    return;
                }
                scope.tutorialNumber++;
                scope.$apply();
                scope.loadFromMenu();
            });
        });
        scope.$watch(attrs.congrats, function(){    
            scope.questionNumber;
            if (scope.sectionNumber === 0 && scope.tutorialNumber === 0) { //if first video play congratulations etc
                if (scope.questionNumber === 1) {
                    start(164.15);
                    pause(166.8);
                } else if (scope.questionNumber === 2) {
                    start(167.1);
                    pause(170);
                } else if (scope.questionNumber === 3) {
                    start(171.1);
                }
            }
        });
    };
})
于 2013-03-02T18:51:03.237 回答