如何延迟控制器（angularjs）的执行直到加载外部JS文件？

Question

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

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

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

我该怎么做？

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

Answer 1

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

1) 编写一个封装 Youtube API 的指令（您需要使用自己的回调覆盖 onYouTubeIframeAPIReady，这样您就可以实际定位任何具有具体 id 的 dom 元素，而不仅仅是一个。）

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 中。