我正在创建一个angularjs指令来渲染youtube video.using Iframe Api。我在编译函数中调用api。但是编译函数本身并没有被调用。这是柱塞http://plnkr.co/edit/PcpzOoYq73pKGeB7nZP5?p=preview
TimelyApp.directive('youtube', function($window) {
var directive = {};
var player;
directive.restrict = 'E';
directive.template = '<div id="myPlayer"></div>';
directive.complie = function(element, attribute) {
console.log("compile working");
var scriptTag = document.createElement("script");
scriptTag.src = "http://www.youtube.com/iframe_api";
var orignalScriptTag = document.getElementsByTagName('script')[0];
console.log(orignalScriptTag.parentNode);
orignalScriptTag.parentNode.insertBefore(scriptTag, orignalScriptTag);
var link = function($scope, element, attribute) {
$window.onYouTubeIframeAPIReady = function() {
player = new YT.Player('myPlayer', {
height: '390',
width: '670',
events: {
'onReady': onPlayerReady,
}
});
};
};
return link;
};
var onPlayerReady = function(event){
console.log(event);
player.cuePlaylist(["OG0xt2xTq4A","jOYR3k1VhUQ"]);
//event.target.playVideo();
player.playVideo();
};
return directive;
})
我做错了什么?
发布于 2015-04-15 17:50:45
打字错误。你把compile
错拼成complie
了。你可以继续踢自己了:P
发布于 2015-04-15 17:53:18
这个Plunkr能帮你解决这个问题吗?
app.directive('myYoutube', function($sce) {
return {
restrict: 'EA',
scope: { code:'=' },
replace: true,
template: '<div style="height:400px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
link: function (scope) {
console.log('here');
scope.$watch('code', function (newVal) {
if (newVal) {
scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
}
});
}
};
});
https://stackoverflow.com/questions/29657100
复制相似问题