无法存储使用 Angular.js UI 路由器构建的多步骤表单的数据

Question

我无法存储用户在我的表单上输入的数据。它是多步骤形式，每个部分都作为使用 Angular UI 路由器的视图包含在内。我已经记录了应该存储数据的对象，但它是空的。

var app = angular.module("Signup", ['ui.router', "ngAnimate"]);
app.config(function($stateProvider,$urlRouterProvider) {
  $urlRouterProvider.otherwise('/index/signup');
  $stateProvider
  .state('index', {
    url: '/index',
    templateUrl: 'index.html',
    controller: 'FormCtrl'
  })
  .state('index.signup', {
    url: '/signup',
    templateUrl: 'views/signup.html',
    controller: 'FormCtrl'
  })
  .state('index.otp', {
    url: '/otp',
    templateUrl: 'views/otp.html',
    controller: 'FormCtrl'
  })
  .state('index.password', {
    url: '/password',
    templateUrl: 'views/password.html',
    controller: 'FormCtrl'
  })
  .state('index.identity', {
    url: '/identity',
    templateUrl: 'views/identity.html',
    controller: 'FormCtrl'
  })
  .state('index.done', {
    url: '/done',
    templateUrl: 'views/done.html',
    controller: 'FormCtrl'
  });
});

app.controller("FormCtrl", ["$scope", "$location", "$window", "dataService", function($scope, $location, $window, dataService) {
    $scope.newuser = dataService.newuser;
    if(document.getElementById('showPswd')) {
      document.getElementById('showPswd').addEventListener("click", function() {
          var pwd = document.getElementById("newPassword");
          if (pwd.getAttribute("type") === "password") {
              pwd.setAttribute("type", "text");
          } else {
              pwd.setAttribute("type", "password");
          }
      });
    }
    if(document.getElementById('last')) {
      console.log(dataService.newuser.firstname);
          setTimeout(function() {
            $window.open('http://www.ayushdevelops.com/');
          }, 10000);
    }
    $scope.go = function(path) {
      $location.path(path);
    };
}]);
app.factory('dataService', function() {
  return {
    newuser: {}
  };
});

我

不想用我的所有观点填充此页面，因此我只发布一个。

        <div id="wrapper-signup">
      <h1>Borrower Signup</h1>
      <p>Register and start borrowing money online.</p>
      <div class="element-wrap">
        <label>NAME<br>
          <div class="name-wrap">
            <input type="text" ng-model="newuser.firstname" name="firstname" id="firstname" value="" placeholder="First Name">
            <input type="text" ng-model="newuser.lastname" name="lastname" id="lastname" value="" placeholder="Last Name">
          </div>
        </label><br>
      </div>
      <div class="element-wrap">
          <label for="email">EMAIL
            <div class="email-num-wrap">
              <span class="awesome-icon"><i class="fa fa-envelope-o fa-lg email-icon" aria-hidden="true"></i></span><input type="email" id="email" ng-model="newuser.email" name="email" value="" placeholder="Email ID" required>
            </div>
            <p class="error" style="color: red; font-size: 0.8em;" ng-show="signForm.email.$invalid && signForm.email.$dirty">Enter a valid email</p>
          </label>
      </div>
      <div class="element-wrap">
        <label>MOBILE NUMBER
          <div class="email-num-wrap">
            <span class="awesome-icon"><i class="fa fa-mobile fa-2x mobile-icon" aria-hidden="true"></i></span><input type="number" id="number" ng-model="newuser.number" name="mobile-number" value="" placeholder="Enter 10 digit number">
          </div>
        </label>
      </div>
      <div class="clear">
        &nbsp;
      </div>
      <div class="checkbox-wrap">
      <input type="checkbox" class="checkbox" name="terms" value="" ng-model="tcheck" required><p class="checkbox-text">I have read and agree to the <a href="#">Privacy Policy</a>, <a href="#">Terms of Use</a> and consent to Electronic Disclosures.</p>
      </div>
      <div class="checkbox-wrap">
        <input type="checkbox" class="checkbox" name="condiiton" value="" ng-model="ccheck" required><p class="checkbox-text">I authorize RupaiyaExchange to share my details with other Financial Institutions for credit card check and faster processing of loan.</p>
      </div>
      <a ui-sref='index.otp' ng-show="signForm.email.$valid && tcheck && ccheck" class="submit-signup">SIGNUP</a>
    </div>

Answer 1

每个视图都会重新初始化 FormCtrl 及其范围，因此您将仅获得来自最后一个视图"完成"的数据，我假设最后一个视图不提供任何数据，这就是模型为空的原因，尝试将数据存储在 rootScope 中

Answer 2

您是否可能将模型绑定到未定义的属性？对于ng模型可以吗？

尝试在工厂中设置每个属性，看看是否有帮助。

例如：

app.factory('dataService', function() {
  return {
    newuser: {
       firstName: '',
       lastName: ''
    }
  };
});