通过 Angular 路由更改页面时重置 Angular 服务答案

【问题标题】：Angular service reset when changing page through Angular routes通过 Angular 路由更改页面时重置 Angular 服务
【发布时间】：2014-10-11 19:40:26
【问题描述】：

我有多页注册表单，我需要将数据保存到最后一步，以便用户可以跳转到任何一步进行编辑。

我使用服务“用户”作为所有六个步骤的单例对象。

userService.js

myApp.service('User',function($http,Auth,$location,$rootScope){
 var register; 
 var c_user = [];

 // Using Angular Devise plugin
 // Sample user Response
 // {"id":1,"email":"demo@gmail.com","mobile":"8951112312","name":"","admin":true,"created_at":"2014-06-25T12:07:33.000Z","updated_at":"2014-08-19T06:36:55.000Z"}

 Auth.currentUser().then(function(user) {
  c_user.push(user);
 });

 return {
   register:register,
   c_user:c_user
 }
})

headerController.js

function headerController($scope,User) {
 $scope.c_user = User.c_user;
 $scope.reg = User.register;
 $scope.$watch( function () { return User.register; }, function ( register ) {
   $scope.reg = User.register;
 });
}

signUpController.js

function signUpController($scope,User) {
 $scope.$watch('user', function(user){
  User.register = user;
 });
}

此绑定有效，因此当我更改 $scope.user 时，服务变量会更新，这也会反映在其他控制器中。但是当我更改页面时，服务对象“User.register”正在重置。以下是我的路线和视图。

routes.js.erb

myApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
 $locationProvider.html5Mode(true).hashPrefix('!');
 .state('register',
  { url: "/register/:step",
    templateUrl: "/assets/user/register.html",
    controller: "signUpController" })
});

register.html

<div ng-show="step == 1">
 <input type="text" ng-model="user.step1.name">
</div>

<div ng-show="step == 2">
 <input type="text" ng-model="user.step1.email">
</div>

<div ng-show="step == 3">
 <input type="text" ng-model="user.step1.mobile">
</div>

<a href="/register/{{1* step +1}}" ng-show="1* step < 3"> Proceed to Step {{1* step +1}}</a>
<a href="/register/{{1* step -1}}" ng-show="1* step > 1"> Back to Step {{1* step -1}}</a>

与上述问题无关

@apairet : HeaderController 场景

我将 AngularJs 与 rails 应用程序一起使用，其中我有应用程序布局和 ui-view。

<header>
<div class="logo-header" ng-controller="headerController">
  <span class="logo"><a href="/"><img src="/assets/logo.png"></a></span>
  <span class="header-icons pull-right">
    <span ng-show="c_user[0]">
      Hi, {{c_user[0].name}}
      <a href="#" ng-click="logout()"> <i class="fa fa-stop"></i> </a>
    </span>
    <span ng-hide="c_user[0]">
      <a href="/register/1">
        <span>SIGN UP NOW<span>
      </a> | 
      <a href="/login">
        <span>SIGN IN NOW<span>
      </a>
    </span>
</div>
<div class="menu-header">
  <paper-icon-button class="menu-icon" icon="menu"></paper-icon-button>
  <span flex>MUTUAL FUNDS</span>
</div>
</header>
<body>
  <div ui-view> </div>
</body>

我正在使用用户服务来存储当前用户信息和使用该服务的标头控制器。我最初尝试对标题使用相同的“signUpcontroller”

但是当我导航到注册页面时，控制器被启动了两次，所以我想创建单独的控制器来处理标题 UI 绑定。

【问题讨论】：

感谢您更新您的问题。 'c_user' 在哪里启动？您在视图中使用它，但在您的控制器中没有像 '$scope.c_user = ...' 这样的东西！是否可以设置 plunkr 或 jsfiddle？
@apairet ：再次感谢您的快速回复，我更新了问题。如果上述更新不清楚，我将设置 Jsfiddle。

标签： angularjs angularjs-scope angular-ui angularjs-routing angular-services

【解决方案1】：

这就是失败的原因：每次更改路由时，都会实例化控制器“signUpController.js”。当它被实例化时，会执行几个 $digest 循环并相应地调用 watch。第一次运行时，您的监视表达式将返回“未定义”。您可以通过在 watch 表达式中设置 console.log 来测试它：

function signUpController($scope,User) {
    var count = 0;
    $scope.$watch('user', function(user){
        console.log(count, user)
        count += 1;

        User.register = user;
    });
}

您可以通过将 $scope.user 分配给 User.register 来修复它：

function signUpController($scope,User) {
    $scope.user = User.register;
    $scope.$watch('user', function(user){
        User.register = user;
    });
}

但是 $watch 表达式没有用，因为您使用的是 ngModel。您的控制器可以简化为：

function signUpController($scope,User) {
    $scope.user = User.register;
}

此外，我不明白你的 headerController 的目的。你能展示你如何使用它并解释它的目标吗？

【讨论】：

感谢您的快速回答，它真的很有帮助。我在问题中添加了有关 headerController 的场景，如果您有更好的解决方案，那将会很有帮助。