0

YTPlayer という YouTube プレーヤーを使用しています。 https://github.com/pupunzi/jquery.mb.YTPlayer

このコードで、彼は正常に動作する JQuery 呼び出しを行います。

$(document).ready(function () {
    $(".player").mb_YTPlayer();
});

JQueryを使用せずにコントローラーからそのような呼び出しを行うにはどうすればよいですか?

ありがとう。

4

1 に答える 1

1

ディレクティブを作成します。ディレクティブは、html を拡張するものと考えることができます。

ディレクティブは次のようになります。

.directive('ytPlayer', function() {
   return {
       scope: {
           pathToVideo: '&'
       },
       link(scope, element, attr) {
            //at this point, the DOM is ready and the element has been added to the page.  It's safe to call mb_YTPlayer() here.
            //also, element is already a jQuery object, so you don't need to wrap it in $()
            element.mb_YTPlayer();

            //scope.pathToVideo() will return '/video.mpg' here

       }
   }
}

そして、このマークアップを使用してページに追加します。

<yt-player path-to-video="/video.mpg"></yt-player>

ビデオ プレーヤーが jQuery に依存している場合は、ディレクティブ内で jQuery を使用してもかまいません。angularコントローラーでjQueryを使用する必要はありません。もしあなたがそうしていることに気付いたなら、あなたは「角ばった考え」をしているわけではありません。

多くの場合、ビデオ プレーヤーやその他のコンポーネントを機能させるには特定のマークアップが必要になるため、テンプレート プロパティを使用してディレクティブのテンプレートをカスタマイズできます。

.directive('ytPlayer', function() {
   return {
       scope: {
           pathToVideo: '&'
       },
       replace: true,
       template: '<div><span></span></div>'
       link(scope, element, attr) {

            element.mb_YTPlayer();

            //scope.pathToVideo() will return '/video.mpg' here

       }
   }
}

これらの 2 行:

replace: true,
template: '<div><span></span></div>'

angular は yt-player マークアップを template プロパティのマークアップに置き換えます。

于 2015-02-25T18:44:35.613 に答える