AngularJS：指令之间的通信

Question

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

提前致谢！

Answer 1

制作每个指令使用的服务并在其中保持状态。

像这样的东西：

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

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

Answer 3

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

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

$ broadcast（）和$ on（）范围文档

Answer 4

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