Angular.js UIルーターを使用して構築された複数ステップフォームのデータを保存できません

Question

ユーザーが入力したデータはフォームに保存できません。これは多段階のフォームであり、各セクションは角度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: {} 
    }; 
}); 

私はので、私はちょうど1を掲示しています、私のすべてのビューで、このページを移入する必要はありません。

 <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を再初期化して、「完了」のみ最後のビューからのデータを持っていますので、それはスコープだ、私はデータの格納にしようと、最後のビューは、モデルが空である理由です任意のデータを提供しないことを前提としていin rootScope

Answer 2

おそらくあなたのモデルを定義されていないプロパティにバインドしていますか？それはNGモデルのために大丈夫ですか？

工場の各プロパティを設定し、それが役立つかどうかを確認してください。

例：

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