javascript - Using angular service to share data between controllers - Stack Overflow

admin管理员组

文章数量:1278919

I am trying to have two different controllers municate with each other.

Controller 1

function WeleCtl($scope, emailService) {
    $scope.save=function(){
        emailService.saveEmail(‘Hi’);
        }
}

WeleCtl.$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

I am trying to have two different controllers municate with each other.

Controller 1

function WeleCtl($scope, emailService) {
    $scope.save=function(){
        emailService.saveEmail(‘Hi’);
        }
}

WeleCtl.$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./btford/angular-express-seed

• javascript
• angularjs
• service
• controller
• share

Share Improve this question Follow edited May 23, 2017 at 12:24 CommunityBot 111 silver badge asked Feb 26, 2013 at 21:50 user2110481user2110481 6311 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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/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

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

this guy explained it in a very simple way.

本文标签： javascriptUsing angular service to share data between controllersStack Overflow