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