3

我正在编写一个创建 mp3/音频播放器的指令。问题是您可以在一页中拥有许多音频播放器。我想做的是当一个正在播放而你开始另一个时，当前正在播放的那个会暂停。如何使用角度指令实现这一目标？

提前致谢！

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这意味着您可以为所有媒体播放器拥有一个控制器，您可以在其中实现您提到的逻辑。有关更多信息，请参阅有关指令的文档（搜索controller:）。

如果您认为会有更多的逻辑消费者，我会推荐服务方法，或者如果只有指令使用逻辑，我会推荐指令控制器方法。我建议不要在根范围内广播事件，因为它具有非耦合性和全局性。只是我的两分钱！高温高压

于 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. 所有指令都可以订阅此事件，并且它们可以通过停止自己来对此事件做出反应。您需要做的一件事是传递有关正在启动的播放器的数据，以便新播放器不会自行停止，因为它也会订阅此类事件。

于 2013-09-13T07:23:19.593 回答