Question

假设这只手表在指令内，可以像这样从主控制器中观察一个变量吗？这是整个指令。当它看起来像这样时，手表会在第一页加载时被触发，但之后再也不会被触发。我没有将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);
            }
        }
    });
}

}）

Answer 1

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

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

Answer 2

由于您的指令不是创建新作用域或隔离作用域，因此它使用HTML中使用该指令的作用域。如果controls是一个指令并且它创建了一个new或isolate范围，那么video-loader指令也将使用该范围。这也许可以解释为什么@ rajkamal的答案不适合你。

如果controls不是指令，那么视频加载器将使用控制器的范围（除非您在ng-repeat中创建视频加载器或创建子范围的其他指令。）没有向我们展示更多对于HTML，无法确定指令的范围。

这里是a plunker，展示了在控制器范围内使用的视频加载器指令如何访问该范围（特别是questionNumber属性）。

虽然可能需要一段时间习惯jsfiddle和plunker，但我强烈建议花时间。如果你有一个jsfiddle或者plunker，人们可以更快地帮助你。

Answer 3

hallelujah我做到了！答案是否定的，显然指令无法看到其他控制器的范围，它们必须通过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);
                }
            }
        });
    };
})

我可以在指令中查看控制器范围属性吗？

3 个答案: