Angularjs自定义指令编译函数没有被调用答案

【问题标题】：Angularjs custom directive compile function not getting calledAngularjs自定义指令编译函数没有被调用
【发布时间】：2015-06-21 19:40:18
【问题描述】：

我正在创建一个 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;
})

我做错了什么？

【问题讨论】：

标签： javascript angularjs youtube-javascript-api

【解决方案1】：

错字。您将compile 拼错为complie。你现在可以继续踢自己了：P

【讨论】：

【解决方案2】：

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

Create a YouTube AngularJS Directive

【讨论】：