One of the services I have created is designed to manage message broadcasting to controllers that require it.
The service implementation:
.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;
});
The controller (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);
};
}
The HTML structure (html):
<div ng-controller="AlertCtrl">
<alert ng-repeat="msg in msgs" type="msg.type" close="closeAlert($index)">{{msg.msg}}</alert>
</div>
The broadcasted message appears correctly when inserted anywhere in the HTML except within a modal window. How can I make it display in the modal window?
You can find the code example on Plnkr: http://plnkr.co/edit/l6ohBYRBMftpfxiKXvLr?p=preview