Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 907
user2110481 Avatar asked Feb 26 '13 21:02

user2110481


People also ask

How do I share data between two controllers?

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.

Is used to share data between controller and view in AngularJS?

14) Which of the following is used to share data between controller and view in AngularJS? Answer: B: "using services" is the correct answer.


1 Answers

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:

  • look at how to use Angular.js routing (http://docs.angularjs.org/tutorial/step_07) so that you stay on the same page.
  • use something to persist your data, such as localstorage. Find out more: http://diveintohtml5.info/storage.html
like image 192
Pascal Belloncle Avatar answered Sep 21 '22 02:09

Pascal Belloncle