javascript - Angular JS 将消息广播到多个视图，包括模态窗口

Question

我有一项服务，用于处理向需要它的控制器广播的消息。

服务：

.factory('mySharedService', function($rootScope) {
  var sharedService = {};

  sharedService.message = '';

  sharedService.prepForBroadcast = function(msg) {
    this.message = msg;
    this.broadcastItem();
  };

  sharedService.broadcastItem = function() {
    $rootScope.$broadcast('handleBroadcast');
  };
  return sharedService;
}); 

cntl:

function AlertCtrl($scope, mySharedService) {
  $scope.msgs = [];
  $scope.$on('handleBroadcast', function() {
    $scope.msgs.push(mySharedService.message);
  });  
  $scope.closeAlert = function(index) {
    $scope.msgs.splice(index, 1);
  };
}

html:

<div ng-controller="AlertCtrl">
  <alert ng-repeat="msg in msgs" type="msg.type" close="closeAlert($index)">{{msg.msg}}</alert>
</div>

因此，在我放置 HTML 片段的任何地方，消息都会按预期显示，除非它位于模式窗口中。

我的问题是：如何让广播消息显示在模式窗口中？

这是 plnkr：http ://plnkr.co/edit/l6ohBYRBMftpfxiKXvLr?p=preview

Answer 1

您可以将参数传递给 $broadcast 方法，因此您可以这样做： $rootScope.$broadcast('handleBroadcast', 'your message here');

在你的听众中：

$scope.$on('handleBroadcast', function(ev, arg){
    $scope.msgs.push(msg);
});

看看：http : //docs.angularjs.org/api/ng .$rootScope.Scope#methods_$broadcast

Answer 2

AlertCtrl主页中有一个实例，并且每当模式打开时都会创建另一个实例（添加 console.log 以验证这一点）。模型内部AlertCtrl被实例化并在事件被广播后开始监听。