0

私はすでにAngularをブートストラップしたYoutube APIベースのプロジェクトに取り組んでいます。外部 JS を呼び出して iFrame API js ファイルを最初にロードし、次に angular が特定のルートで動作できるようにする必要があるときに問題が発生します。

問題は、ロード直後にYoutube iFrame API がonYouTubeIframeAPIReady()関数を呼び出し、この関数がid = 'player' のhtml 要素を必要とし、この iFrame API を特定のビューでのみロードしたいことです。したがって、 id='player'を持つ要素が見つからないため、iFrame API をインデックス ファイルから呼び出すことはできません。

しかし、ビュー自体の 1 つから呼び出すと、API がYTPlayer オブジェクトを作成するのに時間がかかります。その間、コントローラーはそれを呼び出したはずですが、見つかりませんでした。

どうすればいいですか？

Resolve の概念はまだ学習中なので、このシナリオでどのように活用できるかわかりません。

4

1 に答える 1

3

これは一般的な問題です。JS のものの中には、angular とうまく混合できないものがあります。私がよく行うのは、「拡張」メソッドを JS ファイルに追加することです。

1) Youtube API のラッパーであるディレクティブを記述します (onYouTubeIframeAPIReady を独自のコールバックでオーバーライドする必要があるため、1 つだけではなく、具体的な 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で。

于 2014-08-02T19:04:39.517 に答える