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

Question

我正在从事一个基于Youtube API的项目，在这个项目中，我已经引导了角。当我需要调用外部JS先加载iFrame API文件，然后允许角在特定路由上工作时，我遇到了一个问题。

问题是Youtube iFrame API在加载后调用iFrame函数，该函数需要一个带有id = 'player'的html元素，而且我只想在某些视图中加载这个iFrame API。因此，iFrame API无法从索引文件中调用，因为它不会找到任何带有id='player'的元素。

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

我该怎么做？

我仍然在学习解决的概念，所以我不知道如何在这个场景中利用它。

Answer 1

这是常见的问题。有些JS的东西不能很好地与棱角混合。我经常做的是在JS文件中添加"extension“方法。

1)编写一个指令，它是Youtube API的包装器(您需要用自己的回调覆盖onYouTubeIframeAPIReady，这样就可以使用具体的id而不是仅针对一个dom元素)。

2)在您的指令中，使用requireJS为您的自定义外部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中。