如何延迟控制器(angularjs)的执行，直到外部JS文件加载

Question

我正在做一个基于Youtube API的项目，在这个项目中我已经引导了angular。我遇到了一个问题，当我需要调用一个外部JS来加载iFrame API JS文件，然后允许angular在特定的路由上对它进行处理。

问题是Youtube iFrame API调用onYouTubeIframeAPIReady()函数后加载，这个函数需要一个html元素与id = 'player'，我想加载这个iFrame API仅在某些视图。因此iFrame API不能从索引文件中调用，因为它不会找到任何id='player'的元素。

但是如果我从视图本身调用它，那么API需要时间来创建一个YTPlayer对象。同时，控制器会调用它，但找不到它。

我该怎么做?

我还在学习Resolve的概念，所以我不确定如何在这种情况下利用它。

Answer 1

这是常见的问题。JS的一些东西不能很好地与angular混在一起。我经常在JS文件中添加"扩展"方法。

1)写一个指令，这是围绕一个Youtube API包装(你需要覆盖onYouTubeIframeAPIReady与你自己的回调，这样你就可以实际目标任何dom元素与具体的id，而不是只有一个)

2)在你的指令中，使用requireJS来引用你的CUSTOM外部js文件。

require(['youtubeAPI', function(youtubeAPI){
     // register directive
      .directive('externalYoutube', function() {
        return {
          restrict: 'EA',
          transclude: true,
          scope: {},
          templateUrl: 'my-dialog.html',
          link: function (scope, element) {
            youtubeAPI.loaded = function(){
               youtubeAPI.wrap(element);
            }; 
          }
        };
      })]);

的用法类似于

<external-youtube />

在html。