javascript - Controller 之间共享数据未按预期工作

Question

我尝试在 2 个不同页面上的 2 个 Controller 之间共享数据，但它没有按预期工作。

page1.html:

<form ng-controller="FormController">
<input ng-model="user.email">
</form>

page1controller.js:

 app.controller("FormController", ['$scope', '$http', '$window', 'UserEmailService', function($scope, $http, $window, UserEmailService) {
  // Code logic here
  console.log($scope.user.email) // Code outputs a string here
  UserEmailService.setEmail($scope.user.email);
  $window.location.href = "/page2"; // Redirects to page2.html after logic completes
}]);

page2.html:

<div controller="SomeController">
<p> Hi, your e-mail is {{ email }} </p>
</div>

SomeController.js:

  app.controller("SomeController", ['$scope', 'UserEmailService', function($scope, UserEmailService) {
    console.log(UserEmailService.getEmail()); // outputs undefined
    $scope.email = UserEmailService.getEmail();
  }]);

UserEmailService.js

app.service("UserEmailService", function(){
    var email = [];

    var setEmail = function(val) {
      email.push(val);
    };

    var getEmail = function() {
      return email.pop();
    };

    return {
      setEmail : setEmail,
      getEmail : getEmail
    };


  });

我试图从 page1.html 获取用户电子邮件并将其显示在 page2.html 上，但在 page2.html 上它总是显示为未定义。我究竟做错了什么？

Answer 1

在 FormController 中，$window.location.href 将导致整个页面重新加载，从而使您的服务状态重置。尝试 $location.url('') 导航到该路线。它不会导致整个页面重新加载。

如果您希望数据在整页重新加载后可用。您应该使用本地存储之类的东西。

<小时/>

使用工厂而不是服务。了解更多angular.service vs angular.factory

app.factory("UserEmailService", function(){
  var email = [];

  var setEmail = function(val) {
    email.push(val);
  };

  var getEmail = function() {
    return email.pop();
  };

  return {
    setEmail : setEmail,
    getEmail : getEmail
  };

});