1

I have two controllers and one service. Could someone explain me why firstname will be not updatet / the reference is "old" when changing it?

I thought this is the way to communicate between controllers...?

<!-- language: lang-js --> 
// Controller 1
function controllerOne (..., myService) {
 $scope.firstname = myService.customer.firstname;
}
// Controller 2
function controllerTwo (..., myService) {
 $scope.firstnameNew = myService.customer.firstname;
}
// Service
application.factory('myService', ...)
 function(...) {
 return {
 customer: {
 "firstname": "",
 "lastname": "",
 "pers": "",
 "street": "",
 "zip": "",
 "city": "",
 "selectedCountry": "",
 "comment": "" 
 },
 ...
 }
asked Jul 16, 2013 at 16:33
1
  • 1
    Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. Commented Jul 16, 2013 at 17:19

2 Answers 2

1

Communicating between controllers, please check the below fiddle.

var myModule = angular.module('myModule', []);
myModule.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;
});
function ControllerZero($scope, sharedService) {
 $scope.handleClick = function(msg) {
 sharedService.prepForBroadcast(msg);
 };
 $scope.$on('handleBroadcast', function() {
 $scope.message = sharedService.message;
 }); 
}
function ControllerOne($scope, sharedService) {
 $scope.$on('handleBroadcast', function() {
 $scope.message = 'ONE: ' + sharedService.message;
 }); 
}
function ControllerTwo($scope, sharedService) {
 $scope.$on('handleBroadcast', function() {
 $scope.message = 'TWO: ' + sharedService.message;
 });
}
ControllerZero.$inject = ['$scope', 'mySharedService']; 
ControllerOne.$inject = ['$scope', 'mySharedService'];
ControllerTwo.$inject = ['$scope', 'mySharedService'];

http://jsfiddle.net/simpulton/XqDxG/

answered Jul 16, 2013 at 17:51
Sign up to request clarification or add additional context in comments.

Comments

0
<body data-ng-app="myApp"> 
<div data-ng-controller="ctrl1">
 {{firstName}}
 {{lastName}}
 </div>
 <div data-ng-controller="ctrl2">
 {{firstName}}
 {{lastName}}
 </div>
</body>
Script :
 var myApp= angular.module('myApp', []);
myApp.controller('ctrl1', function ($scope, myService) {
 $scope.firstName = myService.firstName;
 $scope.lastName = myService.lastName;
 myService.firstName = "ABC";
 myService.lastName = "DEF";
});
myApp.controller('ctrl2', function ($scope, myService) {
 $scope.firstName = myService.firstName;
 $scope.lastName = myService.lastName;
});
myApp.factory('myService', function ($rootScope) {
 return {
 firstName: '123',
 lastName: '456'
 };
});
answered Jul 8, 2017 at 8:05

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.