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

Question

该指令通过使用链接函数来控制视频标签，以观看 src 属性（其本身由具有 tutorialNumber 索引的绑定数组控制，如此 videos[tutorialNumber]）然后重新加载视频并播放。它还在“结束”上附加了一个事件侦听器，以便视频在完成时自动加载下一个。然而，scope.tutorialNumber++ 似乎并没有像我使用 ng-click 事件手动触发它时那样在“结束”时触发指令中的 $watch。如何确保“结束”事件按应有的方式加载下一个视频？

.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

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