3

mp3/オーディオ プレーヤーを作成するディレクティブを作成しています。問題は、1 つのページに多数のオーディオ プレーヤーを配置できることです。私がやりたいのは、一方が再生されているときに別の再生を開始すると、現在再生中のものが一時停止することです。angularディレクティブでこれをどのように達成できますか?

前もって感謝します！

4

4 に答える 4

8

各ディレクティブが使用するサービスを作成し、そこに状態を保持します。

このようなもの：

angular.module('MyPlayer' [])
.factory('playerState', function() {
    var players = [];
    return {
        registerPlayer: function(player) {
            players.add(player);
        },
        unregisterPlayer: function(player) {
            var i = players.indexOf(player);
            (i>-1) && players.splice(i,1);
        },
        stopAllPlayers: function() {
            for(var i=0;i<players.length;i++) {
                players[i].stop();
            }
        }
    }
})

.directive('player', function(playerState) {
    return {
        ...
        link: function(scope, elem, attr) {
            var player = {
                stop: function() {
                    /* logic to stop playing */
                },
                play = function(song) {
                    playerState.stopAllPlayers();
                    /* logic to start playing */
                }
            }

            playerState.registerPlayer(player);
            scope.$on("$destroy", function() {
                playerState.unregister(player);
            });

            scope.play = player.play;
            scope.stop = player.stop;

            ...
        }
    }
})
于 2013-09-13T07:18:24.353 に答える
5

答えを完成させるために、イベントのブロードキャストとサービスの公開の次に、ディレクティブ コントローラーを使用することもできます。これらのコントローラーはcontroller、ディレクティブ定義オブジェクトのプロパティを通じて設定されrequire、同じコントローラーのディレクティブ間で共有されます。これは、前述のロジックを実装できるすべてのメディア プレーヤーに対して 1 つのコントローラーを使用できることを意味します。詳細については、ディレクティブに関するドキュメント( を検索controller:) を参照してください。

ロジックの消費者が増えると思われる場合はサービス アプローチをお勧めします。ディレクティブのみがロジックを消費する場合は、ディレクティブ コントローラー アプローチをお勧めします。ルート スコープでイベントをブロードキャストしないことをお勧めします。ちょうど私の2セント！HTH

于 2013-09-13T09:31:01.357 に答える
1

ディレクティブはどのように設定されていますか? いくつかのコードを提供してください。

これは、ディレクティブのスコープに依存します。子スコープを想定します。ディレクティブ間で通信するには、ユーザーがクリックしてプレーヤーを開始したときに、$scope.$parent.$broadcast() を呼び出します。または、ディレクティブが異なるコントローラーにある場合、または分離されたスコープを使用している場合は、$rootScope.$broadcast() を呼び出します。ただし、すべての子スコープにイベントを送信するには、 $rootScope をディレクティブに挿入する必要があります。私のディレクティブは $on を使用してこのイベントを監視し、プレイしていたプレイヤーは停止します。このブロードキャストの後、クリックしたプレーヤーが開始されます。

$broadcast() および $on() スコープのドキュメント

于 2013-09-13T07:28:40.713 に答える
0

のような$rootScope.$broadcastイベントを実行することもできますplayerStarted。このイベントはすべてのディレクティブでサブスクライブでき、ディレクティブは自身を停止することでこのイベントに反応できます。あなたがしなければならないことの1つは、開始しているプレーヤーに関するデータを渡すことです。これにより、新しいプレーヤーもそのようなイベントにサブスクライブするため、それ自体を停止しません。

于 2013-09-13T07:23:19.593 に答える