I am trying to have two different controllers communicate with each other.
Controller 1
function WelcomeCtl($scope, emailService) {
$scope.save=function(){
emailService.saveEmail(‘Hi’);
}
}
WelcomeCtl.$inject = [$scope, emailService];
This controller is designed to take the text from a text field (with ng-model = ‘email’) and put the text into a service (emailService) so it can be used in the next ng-view (which is controlled by the next controller) //for testing purposes I am just putting ‘Hi’ directly into the saveEmail function
Controller 2
function SignupCtl($scope, emailService) {
window.alert(emailService.getEmail())
}
SignupCtl.$inject = [$scope, emailService];
For testing purposed I am using window.alert to display the value of getEmail()
emailService
angular.module('myApp.services', [])
.service('emailService', function (){
var text =”start value”;
return{
saveEmail:function (data){
text = data;
},
getEmail:function (){
return text;
}
};
});
As a result of using Controller1 and Controller 2 as specified with this service, window.alert prints out “start value” instead of ‘Hi’
When I put more window.alert functions in the code to see what is happening I see that when save() is called, Controller 1 executes and saves a value into the service and express.js loads the next page. Then Controller2 activates. When Controller 2 activates it reinitializes the service, setting text back to “start value”. Then when getEmail is called it return the value “start value”
This confuses me because I was under the impression that services were not initialized every time the were included in a controller.
Consulted resources.
Better design for passing data to other ng-view's and persisting it across controllers
I am also working off of the angular-express-seed https://github.com/btford/angular-express-seed
Approach: To share data between the controllers in AngularJS we have two main cases: Share data between parent and child: Here, the sharing of data can be done simply by using controller inheritance as the scope of a child controller inherits from the scope of the parent controller.
14) Which of the following is used to share data between controller and view in AngularJS? Answer: B: "using services" is the correct answer.
Angular.js only works and keeps data on a single page. If your page reloads (as you seem to indicate when you say "express.js loads the next page", then it reinitialized everything.
You should either:
localstorage
. Find out more: http://diveintohtml5.info/storage.html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With