Question

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

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

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场景

我正在使用带有应用程序布局和ui-view的rails应用程序的AngularJs。

<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绑定。

Answer 1

这就是它失败的原因：每次更改路线时，控制器都会签署“控制器”。将被实例化。当它被实例化时，执行几个$摘要循环并相应地调用监视。第一次运行时，您的监控表达式将返回“未定义”状态。您可以通过在watch.log中设置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;
    });
}

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

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

而且，我不明白你的headerController的目的。你能说明你如何使用它并解释它的目标吗？

通过Angular路由更改页面时，角度服务重置

1 个答案: