Question

我正在开展一个基于Youtube API的项目，我已经在其中引导了角度。当我需要先调用外部JS来加载iFrame API js文件然后允许angular在特定路径上处理它时，我遇到了问题。

问题是Youtube iFrame API在加载后调用 onYouTubeIframeAPIReady（）函数，此函数需要一个带 id =＆＃39;播放器＆＃39; 的html元素，我想只在某些视图中加载此iFrame API。因此， iFrame API无法从索引文件中调用，因为它找不到任何 id =＆＃39;播放器＆＃39; 的元素。

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

我该怎么做？

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

Answer 1

这是常见问题。一些JS的东西与角度混合不好。我经常做的是将“扩展”方法添加到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 />

in html。

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

1 个答案: