Angularjs - 在重定向期间保留输入的表单数据，以便用户在返回该表单时继续

Question

我正在创建一个简单的用户数据收集项目，它需要用户以多种形式输入数据。

我为每个表单创建了单独的 html 页面。

用户可以通过表单输入个人详细信息、教育详细信息等。

当用户输入个人详细信息并点击next时，我将数据存储在本地存储中，最后将所有数据发送到db。

当用户单击next 并再次进入同一页面时，我从本地存储中检索数据并将其绑定到相应的文本框中。但是当用户没有点击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>

现在您可以从最后一个控制器的根作用域中检索值并将其发送到 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
});