AngularJS：指令之间的通信

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:）了解更多信息。

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

Answer 3

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

这取决于你的指令的范围，我将假设一个子范围。为了在指令之间进行通信，当用户单击启动播放器时，我会调用 $scope.$parent.$broadcast() - 或 $rootScope.$broadcast() 如果指令位于不同的控制器中或使用隔离范围，但随后您需要将 $rootScope 注入您的指令中 - 将事件发送到所有子范围。我的指令将使用 $on 监视此事件，并且任何正在玩的玩家都会停止。在此广播之后，点击的播放器将开始播放。

$broadcast() and $on() scope documentation

Answer 4

您还可以进行$rootScope.$broadcast 活动，例如playerStarted。所有指令都可以订阅此事件，并且它们可以通过停止自己来对此事件做出反应。您需要做的一件事是传递有关正在启动的播放器的数据，以便新播放器不会自行停止，因为它也会订阅此类事件。