Sharing Data Between Controllers using Services in Angular js
Question
Sharing between controllers through services
I have already gone through the links and videos
sharing data between controllers
Through my problem is little weird
I have a live working plunker for the same see plunker here
Problem description :
JAVASCRIPT
var testModule = angular.module('testmodule', []); testModule .controller('QuestionsStatusController1', ['$rootScope', '$scope', 'myservice', function ($rootScope, $scope, myservice) { $scope.myserviceCopy = myservice; $scope.myserviceCopy.newValue = $scope.NotBinding; myservice.confirming = "asdsadasdd"; $scope.ForceBinding = function(){ $scope.myserviceCopy.newValue = $scope.NotBinding; }; }]); testModule .controller('QuestionsStatusController2', ['$rootScope', '$scope', 'myservice', function ($rootScope, $scope, myservice) { $scope.myservice = myservice; $scope.newMyService = myservice; }]); testModule .service('myservice', function() { this.xxx = "yyy"; });
(in the plunker) "1" is working fine and updating instantly
"2" is only updating when i press the bindNow button
"3" is not updating at all
I just want all of them to refresh instantly and I dont want to use the "1" way(in the plunker)
I know I must be missing something that is conceptually different from what I have perceived.
1 answers
solution1
0 ACCPTED 2014-02-18 10:32:26
I am not sure why you were creating some many copies of the service I have simplified your code and I think it should work as you expect:
js
var testModule = angular.module('testmodule', []);
testModule
.controller('QuestionsStatusController1',
['$rootScope', '$scope', 'myservice',
function ($rootScope, $scope, myservice) {
$scope.myservice = myservice;
$scope.myservice.confirming = "asdsadasdd";
$scope.ForceBinding = function(){
$scope.myservice.newValue = $scope.NotBinding;
};
$scope.$watch("NotBinding",
function( newValue, oldValue ) {
$scope.myservice.newValue = newValue;
}
);
$scope.$watch("confirming",
function( newValue, oldValue ) {
$scope.myservice.confirming = newValue;
}
);
}]);
testModule
.controller('QuestionsStatusController2',
['$rootScope', '$scope', 'myservice',
function ($rootScope, $scope, myservice) {
$scope.myservice = myservice;
}]);
testModule
.service('myservice', function() {
this.xxx = "yyy";
});
and html:
<!DOCTYPE html>
<html ng-app="testmodule">
<head>
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div data-ng-controller="QuestionsStatusController1">
1<br> <input ng-model="myservice.xxx" />{{myService.xxx}}<br>
<hr>
2<br> Dynamic Binding : <input ng-model="NotBinding"/><br>
Click to dynamic Bind <input type="button" value="bindNow" ng-click="ForceBinding()" >
<hr>
3<br>Binding directly to the service model<input ng-model="myservice.confirming">
</div>
<hr><hr><hr><hr><hr>
<div data-ng-controller="QuestionsStatusController2">
The value of xxx is: {{ myservice.xxx }}
<hr>
Dynamic Binding Problem Value : {{myservice.newValue}}
<hr>
Direct binding to the service object : {{myservice.confirming}}
</div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="testmodule">
<head>
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div data-ng-controller="QuestionsStatusController1">
1<br> <input ng-model="myservice.xxx" />{{myService.xxx}}<br>
<hr>
2<br> Dynamic Binding : <input ng-model="NotBinding"/><br>
Click to dynamic Bind <input type="button" value="bindNow" ng-click="ForceBinding()" >
<hr>
3<br>Binding directly to the service model<input ng-model="confirming">
</div>
<hr><hr><hr><hr><hr>
<div data-ng-controller="QuestionsStatusController2">
The value of xxx is: {{ myservice.xxx }}
<hr>
Dynamic Binding Problem Value : {{myservice.newValue}}
<hr>
Direct binding to the service object : {{myservice.confirming}}
</div>
</body>
</html>
Check the differences between your code and mine and you'll find what was wrong, for instance the div for the controller 1 was closed before number 3 (that was why it wasn't being updated).
You can see it in this plunkr .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.