In many scenarios, the data needs to be shared between different scopes. There are different ways to share the data among the scopes. The proper one can be chosen based on the need.
1. Sharing data between Parent scope and Child scope
If Parent-Child relationship can be established, then the data sharing can be implemented as follows.
In AngularJS, Scopes inherits prototypically. ie. In simple terms, if the property is not defined in the child scope, it will be accessed from the parent’s scope. The parent scope’s member variable can be accessed by “$scope.$parent” property from child’s scope.
Javascript
function Parent($scope) {
$scope.x= 5;
$scope.y= 5;
}
function Child($scope) {
$scope.modifyBothScopes= function() {
$scope.$parent.x++;
};
$scope.modifyonlyChildscope= function() {
// member "y" will be created in the child scope
// So, after the following statment, $scope.$parent.y++ will only increment the parent scope.
// It would not affect the child scope.
$scope.y++;
};
}
Html
<div ng-controller="Parent">
parentX = {{x}} <br/>
parentY = {{y}}<br/>
<div ng-controller="Child">
childX = {{x}}<br/>
childY = {{y}}<br/>
<a ng-click="modifyBothScopes()">modifyBothScopes</a><br>
<a ng-click="modifyonlyChildscope()">modifyonlyChildscope</a>
</div>
</div>
JS Fiddle
http://jsfiddle.net/ramandv/JHwxP/
2. Sharing data using Service [like a global variable]
To share the data among independent controllers, Services can be used. Create a service with the data model that needs to be shared. Inject the service in the respective controllers.
In the following example, Service is used to store the variable x. The independent controllers will check the value of X whenever needed.
Javascript
angular.module('myApp', [])
.service('myService', function () {
var x=5 ;
return {
increase : function() {
x++;
},
getX : function() {
return x;
}
};
})
function ControllerA($scope, myService) {
$scope.x = 1;
$scope.incrementDataInService= function() {
myService.increase();
}
$scope.syncDataWithService= function() {
$scope.x = myService.getX();
}
}
function ControllerB($scope, myService) {
$scope.x = 1;
$scope.incrementDataInService= function() {
myService.increase();
}
$scope.syncDataWithService= function() {
$scope.x = myService.getX();
}
}
HTML
<div ng-app="myApp">
<div ng-controller="ControllerA">
ControllerA.X = {{x}}<br/>
<a ng-click="incrementDataInService()">incrementDataInService</a><br>
<a ng-click="syncDataWithService()">syncDataWithService</a><br>
</div>
<hr/>
<div ng-controller="ControllerB">
ControllerB.X = {{x}}<br/>
<a ng-click="incrementDataInService()">incrementDataInService</a><br>
<a ng-click="syncDataWithService()">syncDataWithService</a><br>
</div>
</div>
JS Fiddle
http://jsfiddle.net/ramandv/kR859/
3. Sharing data using Service – monitor the changes
In some times, it is important to monitor the changes in the service. AngularJS provides “$broadcast” to broadcast the data to the listening subscribers.
The following contrived example shows the usage of $broadcast. The ControllerA and ControllerB subscribed to the event “XChanged”. The service “myService” will broadcast the event “XChanged” when the value of “x” changes.
Javascript
angular.module('myApp', [])
.service('myService', function ($rootScope) {
var x=5 ;
return {
increase : function() {
x++;
$rootScope.$broadcast('XChanged', x);
}
};
})
function ControllerA($scope, myService) {
$scope.x = 1;
$scope.incrementDataInService= function() {
myService.increase();
}
$scope.$on('XChanged', function(event, x) {
$scope.x = x;
});
}
function ControllerB($scope, myService) {
$scope.x = 1;
$scope.incrementDataInService= function() {
myService.increase();
}
$scope.$on('XChanged', function(event, x) {
$scope.x = x;
});
}
HTML
<div ng-app="myApp">
<div ng-controller="ControllerA">
ControllerA.X = {{x}}<br/>
<a ng-click="incrementDataInService()">incrementDataInService</a><br>
</div>
<hr/>
<div ng-controller="ControllerB">
ControllerB.X = {{x}}<br/>
<a ng-click="incrementDataInService()">incrementDataInService</a><br>
</div>
</div>
JS Fiddle
http://jsfiddle.net/ramandv/25CVc/