Is there any way to broadcast from $rootScope to modal window $scope?
My $rootScope is ApplicationController and I'm listening in there to socket.io event. When I handle this event I want to $broadcast to ChatController (modal window) $scope (which might be already opened so resolve won't help me here).
A quick example to demonstrate this issue:
index.html:
<!DOCTYPE html>
<html ng-app="App">
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular-ui-bootstrap@0.11.0" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ApplicationController">
<h1>Hello Plunker!</h1>
<input type="button" value="open modal" ng-click="openModal()">
<div ng-controller="NotModalController">
{{fields.field1}}
</div>
</body>
</html>
script.js:
(function() {
var app = angular.module("App", ["ui.bootstrap"]);
app.controller("ApplicationController", function($scope, $modal) {
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: 'chat.html',
controller: 'ModalController',
size: 'lg',
resolve: {
}
});
modalInstance.result.then(function() {
console.log('modal closed');
}, function() {
console.log('modal dismissed');
});
setTimeout(function() {
console.log('broadcasting event');
$scope.$broadcast('someEvent', 'broadcasted value');
}, 3000);
};
});
app.controller("NotModalController", function($scope) {
$scope.fields = {
field1: 'initial'
};
$scope.$on('someEvent', function(event, args) {
$scope.fields.field1 = args;
});
});
app.controller("ModalController", function($scope) {
$scope.fields = {
field1: 'initial'
};
$scope.$on('someEvent', function(event, args) {
$scope.fields.field1 = args;
});
});
})();
modalTemplate.html
<div>
{{fields.field1}}
</div>
the plunkr url : http://plnkr.co/edit/9xpwmleZJnAG66cGWcYO
Think you should use $rootScope.$broadcast instead $scope.$broadcast