Using angular service to share data between controllers

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

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

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:

Solution 2

https://www.youtube.com/watch?v=HXpHV5gWgyk#t=29

this guy explained it in a very simple way.

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply