Angular.js-在重定向期間保留輸入的表單數據，以便用戶在返回該表單時繼續

Question

我正在創建一個簡單的用戶數據收集項目，該項目要求用戶以多種形式輸入數據。

我為每種形式創建了單獨的html頁面。

用戶可以通過表格輸入個人詳細信息，教育詳細信息等。

當用戶輸入個人詳細信息並單擊next我將數據存儲在localstorage中，最后所有數據都發送到db。

當用戶單擊next並再次進入同一頁面時，我從localstorage檢索數據並將其綁定在相應的文本框中。 但是，如果用戶沒有單擊next ，而是使用導航欄選項轉到另一個頁面，則輸入的數據將丟失。

但是，我希望即使用戶不單擊next轉到另一個頁面然后返回該頁面，該數據也仍然存在，以便他可以繼續填寫他離開的表單。

我正在Angularjs中執行此項目。

我對如何做到這一點一無所知，有人請讓我走上正確的道路。

angular.module('userDetails').factory('sessionService', [function () {
return{
    getGlobal: function(key){
        var data = localStorage.getItem("user."+ key);
        if(data){
            return JSON.parse(data).data;
        }
        return null;
    },
    get : function(key){
        var data = localStorage.getItem("user."+ key);
        if(data){
            return JSON.parse(data).data;
        }
        return null;
    },
    set: function(key, value){
        localStorage.setItem("user."+key, JSON.stringify({data: value}));
    }
};

}]);

在我的HTML中

<button ng-click=savePD(PD)> Next </button>

當單擊“個人詳細信息”表單中的next按鈕時：

$scope.savePD = function(PD){
    sessionService.set("personalData",PD);
    $location.path('/educationData');
}

因此，當單擊next按鈕時，模型值將傳遞到函數，然后存儲在本地。

因此，我需要知道何時不單擊下一步並轉到另一頁，如何在第一種形式中保留當前輸入的值。

Answer 1

如果您不希望數據在頁面導航中丟失，則可以使用$rootscope 。

可以通過任何控制器訪問rootscope的數據， just inject the rootscope in the controller 。

根范圍應在app.run函數中初始化。

angular.module('myApp', [])
.run(function($rootScope) {
    $rootScope.form_data = {}
})
.controller('myCtrl', function($scope, $rootScope) {

})
.controller('myCtrl2', function($scope, $rootScope) {

});

form_data以任何形式在任何控制器中以哈希形式提供。

表格1

<div ng-controller="myCtrl">
  <form>
    First Name:<br>
    <input type="text" ng-model="form_data.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="form_data.lastName">
    <br><br>
    <button ng-click="next()">Next</button>
  </form>
</div>

表格2

<div ng-controller="myCtrl2">
  <form>
    Profile:<br>
    <input type="text" ng-model="form_data.profile"><br>
    Age:<br>
    <input type="number" ng-model="form_data.age">
    <br><br>
    <button ng-click="next()">Next</button>
  </form>
</div>

現在，您可以從最后一個控制器的rootscope檢索值，並將其發送到db。

.controller('myCtrl3', function($scope, $rootScope) {
  var data = $rootScope.form_data

  // call http using a service or here itself and send data as a parameter
});