假设这只手表在指令内,可以像这样从主控制器中观察一个变量吗?这是整个指令。当它看起来像这样时,手表会在第一页加载时被触发,但之后再也不会被触发。我没有将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);
}
}
});
}
})
答案 0 :(得分:3)
scope.$watch('questionNumber', function(newValue, oldValue){//something}
。在发布之前我没有尝试过一个例子,但我记得以前尝试过这样的事。
请注意,scope.$watch(scope.questionNumber...
现在是scope.$watch('questionNumber'...
答案 1 :(得分:3)
由于您的指令不是创建新作用域或隔离作用域,因此它使用HTML中使用该指令的作用域。如果controls
是一个指令并且它创建了一个new或isolate范围,那么video-loader指令也将使用该范围。这也许可以解释为什么@ rajkamal的答案不适合你。
如果controls
不是指令,那么视频加载器将使用控制器的范围(除非您在ng-repeat中创建视频加载器或创建子范围的其他指令。)没有向我们展示更多对于HTML,无法确定指令的范围。
这里是a plunker,展示了在控制器范围内使用的视频加载器指令如何访问该范围(特别是questionNumber
属性)。
虽然可能需要一段时间习惯jsfiddle和plunker,但我强烈建议花时间。如果你有一个jsfiddle或者plunker,人们可以更快地帮助你。
答案 2 :(得分:0)
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);
}
}
});
};
})