javascript - 使用 Angular 服务在 Controller 之间共享数据

Question

我正在尝试让两个不同的 Controller 相互通信。

Controller 1

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

WelcomeCtl.$inject = [$scope, emailService];

此 Controller 旨在从文本字段中获取文本(使用 ng-model = 'email')并将文本放入服务(emailService)中，以便在下一个 ng-view(受控)中使用由下一个 Controller ) //出于测试目的，我只是将“Hi”直接放入 saveEmail 函数中

Controller 2

function SignupCtl($scope, emailService) {                                           
    window.alert(emailService.getEmail())
}

SignupCtl.$inject = [$scope, emailService];

出于测试目的，我使用 window.alert 来显示 getEmail() 的值

邮件服务

angular.module('myApp.services', [])
       .service('emailService', function (){
           var text =”start value”;
           return{
               saveEmail:function (data){
                  text  = data;

              },
              getEmail:function (){
                  return text;
              }
          };
      });

作为使用此服务指定的 Controller1 和 Controller 2 的结果，window.alert 打印出“起始值”而不是“Hi”

当我在代码中放置更多 window.alert 函数以查看发生了什么时，我看到调用 save() 时， Controller 1 执行并将值保存到服务中，express.js 加载下一页。然后 Controller2 激活。当 Controller 2 激活时，它会重新初始化服务，将文本设置回“起始值”。然后，当调用 getEmail 时，它返回值“起始值”

这让我感到困惑，因为我的印象是每次将服务包含在 Controller 中时都不会初始化服务。

引用资源。
Better design for passing data to other ng-view's and persisting it across controllers

我也在使用 angular-express-seed https://github.com/btford/angular-express-seed

Answer 1

Angular.js 只能工作并将数据保存在单个页面上。如果您的页面重新加载(正如您在说“express.js 加载下一页”时似乎表明的那样)，那么它会重新初始化所有内容。

你应该:

• 了解如何使用 Angular.js 路由 (http://docs.angularjs.org/tutorial/step_07)，以便您保持在同一页面上。
• 使用一些东西来保存您的数据，例如 localstorage。了解更多:http://diveintohtml5.info/storage.html