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

ディレクティブは新しいスコープまたは分離スコープを作成していないため、HTMLでディレクティブが使用されている場所に影響を与えるスコープを使用します。がディレクティブであり、新しいスコープまたは分離スコープを作成する場合controls、ビデオローダーディレクティブもそのスコープを使用します。これは、@rajkamalの答えがうまくいかなかった理由を説明するかもしれません。

がディレクティブでない場合controls、video-loaderはコントローラーのスコープを使用します（ng-repeatにvideo-loaderがある場合、または子スコープを作成するその他のディレクティブがない場合）。HTMLをさらに表示しないと、不可能です。ディレクティブが取得するスコープを決定します。

これは、コントローラースコープ内で使用されるビデオローダーディレクティブがそのスコープ（特にプロパティ） にアクセスする方法を示すプランカーです。questionNumber

jsfiddleやplunkerに慣れるまでには少し時間がかかるかもしれませんが、時間をかけることを強くお勧めします。あなたがjsfiddleまたはplunkerを持っているなら、人々はあなたをはるかに速く助けることができます。

于 2013-03-03T00:08:28.667 に答える
3

scope.$watch('questionNumber', function(newValue, oldValue){//something}. これを投稿する前に例を試したことはありませんが、以前にこのように試したことを覚えています。

scope.$watch(scope.questionNumber...現在ですのでご注意くださいscope.$watch('questionNumber'...

于 2013-03-02T08:41:43.273 に答える
0

ハレルヤ やったー！答えはノーです。明らかに、ディレクティブは他のコントローラーのスコープを見ることができません。HTML の属性を介して渡す必要があります。これは 1 つの属性だけで問題ありませんでしたが、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>

次に、次のように 2 番目の $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 に答える