0

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

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

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

我该怎么做？

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

4

1 回答 1

3

This is common problem. Some of the JS stuff does not mix well with angular. What I often do is that I add "extension" methods to a JS file.

1) Write a directive which is wrapper around a Youtube API(you need to override onYouTubeIframeAPIReady with your own callback so you can actually TARGET any dom element with concrete id, instead of only one.)

2) In your directive, use requireJS to pull in reference for your CUSTOM external js file. 

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

the usage would be something like

<external-youtube />

in html.

于 2014-08-02T19:04:39.517 回答