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，所有数据都将被删除。我查了一下fiddler，可以看到当我从一个状态移动到另一个状态时，会调用服务器并生成一个新视图。

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

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

我认为你需要做的是分享父和子统计数据之间的范围。这是stackoverflow帖子的好例子。 https://stackoverflow.com/a/27699798/284225

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

2 个答案: