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

【问题标题】：How to prevent losing data when moving from one state to another in multi-step form?以多步形式从一种状态移动到另一种状态时如何防止丢失数据？
【发布时间】：2015-10-26 13:14:42
【问题描述】：

我是网络编程新手，尤其是 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，所有数据都将被删除。我检查了提琴手，可以看到当我从一种状态移动到另一种状态时，会调用服务器并生成一个新视图。

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

【问题讨论】：

使用服务或父状态。

标签： angularjs angular-ui

【解决方案1】：

我认为您需要做的是在父子统计信息之间共享 $scope。这是带有很好示例的stackoverflow帖子。 https://stackoverflow.com/a/27699798/284225

【讨论】：

【解决方案2】：

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

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

如果有帮助就干杯！

【讨论】：