尝试使用ng-view模板使videoJS在angular指令中工作.角度路由和模板注入都运行良好.
HTML代码:
<div ng-view>
</div>
Run Code Online (Sandbox Code Playgroud)
模板代码:
<div ng-controller="VideoCntrl">
<div class="row offset2" >
<video id='myVideo' videodir controls class="video-js vjs-default-skin" >
<source src="{{video.videoURL}}" type="video/mp4" />
</video>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
指令代码
app.directive('videodir',function(){
var linkFn;
linkFn = function (scope, element, attrs){
videojs("myVideo",{"techOrder": ["html5","flash"]},function(){
this.src({type: "video/mp4", src: scope.video.videoURL});
console.log(scope.video.videoURL);
});
console.log('linkfn');
};
return {
restrict: 'A',
link: linkFn
}
});
Run Code Online (Sandbox Code Playgroud)
指令videodir中的videojs ready函数仅在页面第一次被触发时触发,或者我是否重新加载页面.我第一次点击我的页面时,在控制台日志中看到我的视频的url来自scope.video.videoURL,而DOM正在使用videoJS.如果我点击导航链接加载一个不同的模板,然后回来,videojs ready函数不会触发(即我没有在控制台日志中看到我的videoURL,并且DOM没有被videoJS更改.我看到'linkFn '每次加载模板代码时都在控制台中.我假设在我执行console.log('linkFn')的指令中,我可以在videojs("myVideo")对象上调用一些初始化代码,以便它可以操作DOM正确,但我无法弄清楚它可能是什么.
任何帮助非常感谢.