video - 使用视频标签进行自动加载的 Angular 指令

Question

该指令通过使用链接函数来观看 src 属性(其本身由索引为tutorialNumber 的绑定(bind)数组控制，如视频[tutorialNumber] 所示)来控制视频标签，然后重新加载视频并播放。它还在“结束”上附加一个事件监听器，以便视频在结束时自动加载下一个视频。但是，scope.tutorialNumber++ 似乎不会在“结束”时触发指令中的 $watch，就像我使用 ng-click 事件手动触发它时那样。如何确保“结束”事件按预期加载下一个视频？

.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();
            });
        });
    }
});

Answer 1

如果您确定事件正在被触发，请尝试将 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();
            });
        });
    }
});