Question

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

提前致谢！

Answer 1

Make a service每个指令使用并保持状态。

这样的事情：

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;

            ...
        }
    }
})

Answer 2

只是为了完成答案，在广播事件旁边，以及公开服务，您还可以使用指令控制器。这些控制器通过指令定义对象的controller属性设置，并在require同一个控制器的指令之间共享。这意味着您可以为所有媒体播放器配备一个控制器，您可以在其中实现您提到的逻辑。有关详细信息，请参阅documentation on directives（搜索controller:）。

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

Answer 3

您的指令如何设置？请提供一些代码。

这取决于你的指令的范围，我将假设一个子范围。要在指令之间进行通信，当用户点击启动播放器时，我会调用$ scope。$ parent。$ broadcast（） - 或$ rootScope。$ broadcast（）如果指令在不同的控制器中或使用隔离的作用域，但是你需要将$ rootScope注入你的指令 - 将事件发送到所有子范围。我的指令是使用$ on观看此活动，任何正在玩的玩家都会停止。在这次广播之后，点击的玩家将开始。

<强> $broadcast() and $on() scope documentation

Answer 4

您还可以执行playerStarted之类的$rootScope.$broadcast次活动。所有指令都可以订阅此事件，并且可以通过停止自己来响应此事件。你需要做的一件事就是传递关于正在开始的玩家的数据，这样新玩家就不会停止，因为它也会订阅这样的事件。

AngularJS：指令之间的通信

4 个答案: