2

このディレクティブは、リンク関数を使用してsrc属性（このvideos [tutorialNumber]のようなtutorialNumberのインデックスを持つバインドされた配列によって制御されます）を監視し、ビデオをリロードして再生することにより、ビデオタグを制御します。また、「終了」にイベントリスナーをアタッチして、ビデオが終了したときに次のリスナーを自動的にロードするようにします。ただし、scope.tutorialNumber ++は、ng-clickイベントを使用して手動でトリガーした場合のように、「終了」時にディレクティブで$watchをトリガーしないようです。'end'イベントが次のビデオを正しくロードするようにするにはどうすればよいですか？

.directive('videoLoader', function(){
    return function (scope, element, attrs){
        scope.$watch(attrs.videoLoader, function(){
            element[0].load();
            element[0].play()
            video.hasPlayed = true;
            $(video).bind('ended', function(){
                $(this).unbind('ended');
                if (!this.hasPlayed) {
                    return;
                }
                scope.tutorialNumber++;
                scope.loadFromMenu();
            });
        });
    }
});
4

1 に答える 1

2

イベントがトリガーされていることが確実な場合はscope.$apply()、イベント ハンドラーに を追加してみてください。

.directive('videoLoader', function(){
    return function (scope, element, attrs){
        scope.$watch(attrs.videoLoader, function(){
            element[0].load();
            element[0].play()
            video.hasPlayed = true;
            $(video).bind('ended', function(){
                $(this).unbind('ended');
                if (!this.hasPlayed) {
                    return;
                }
                scope.tutorialNumber++;
                scope.loadFromMenu();
                scope.$apply();
            });
        });
    }
});
于 2013-02-28T19:26:46.070 に答える