以多步形式从一种状态移动到另一种状态时如何防止丢失数据？

Question

我是网络编程的新手，尤其是 AngularJS。所以也许我的问题对你们中的一些人来说似乎很幼稚。

我正在使用 angular-ui-router 开发单页应用程序。我创建了一个包含 3 个状态的多步骤表单：

(function () {
"use strict";
angular.module("sensorManagement", ["ui.router", "ngAnimate", "ngResource", "toaster"])

    .config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterPorvider) {
        $urlRouterPorvider.otherwise("/Sensor/Home");

        $stateProvider
          .state("MultiStepForm", {
              url: "/Sensor/MuiltyStepForm",
              templateUrl: "/app/MultiStepForm/MuiltyStepForm.html",
          })

         .state('MultiStepForm.step1', {
             url: '/step1',
             templateUrl: '/app/MultiStepForm/FormStep1.html'
         })
         .state('MultiStepForm.step2', {
             url: '/step2',
             templateUrl: '/app/MultiStepForm/FormStep2.html'
         })
         .state('MultiStepForm.step3', {
             url: '/step3',
             templateUrl: '/app/MultiStepForm/FormStep3.html'
         });
    }]);
})();

这里是 HTML 代码：

    <!-- form.html -->
<div class="row">
    <div class="col-sm-8 col-sm-offset-2">

        <div id="form-multiple-step">

            <div class="page-header text-center">

                <!-- the links to our nested states using relative paths -->
                <!-- add the active class if the state matches our ui-sref -->
                <div id="status-buttons" class="text-center">
                    <a ui-sref-active="active" ui-sref=".step1"><span>STEP1</span></a>
                    <a ui-sref-active="active" ui-sref=".step2"><span>STEP2</span></a>
                    <a ui-sref-active="active" ui-sref=".step3"><span>STEP3</span></a>
                </div>
            </div>

            <form id="single-form">

                <!-- our nested state views will be injected here -->
                <div id="form-views" ui-view></div>
            </form>            
        </div>
    </div>
</div>

如您所见，我有 3 个状态，每个状态都有自己的视图。视图有多个元素（文本框和复选框）。

当用户为 STEP1 视图输入一些数据并移动到下一步（STEP2 或 STEP3）时，然后在某个时候返回到 STEP1，所有数据都将被删除。我检查了提琴手，可以看到当我从一个状态移动到另一个状态时，对服务器进行了调用并生成了一个新视图。

我的问题是，当我从一种状态转移到另一种状态时，如何防止数据丢失？我必须使用缓存吗？或者也许还有另一种方法可以防止服务器调用并使数据保持活动状态，直到单击 submit 按钮。

Answer 1

当您觉得必须在应用中跨控制器保存数据时。你应该使用服务。

app.factory('sharedDataService',  function ($rootScope) {

    console.log('sharedDataService service loaded.');
    // do something here that can be shared in other controller

});


//pass this service in your controller to use it there
app.controller('Controller2', ['$scope', 'sharedDataService', function ($scope, sharedData) {

    console.log('Controller2 controller loaded.');
    //get data from shared service

}]);

在这里找到有用的Fiddle

如果有帮助，干杯！

Answer 2

我认为您需要做的是在父子统计信息之间共享 $scope。这是 Whosebug post 的好例子。

以多步形式从一种状态移动到另一种状态时如何防止丢失数据？

How to prevent losing data when moving from one state to another in multi-step form?

angularjs

angular-ui