跨 UI 路由器视图/状态保留表单数据

Question

我在使用 Angular 中的 UI-Router 创建多步骤表单时遇到问题。

我遇到的问题是保留输入到表单字段中的数据。

我尝试以本教程为例，尽管它与我正在做的有点不同：https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router

这是我目前的设置方式：

州：

.state('start', {
      url: "/start",
      templateUrl: "partials/start.html",
      controller: 'FormController'
    })
    .state('info', {
      url: "/info",
      templateUrl: "partials/info.html",
      controller: 'FormController'
    })
    .state('personnel', {
      url: "/personnel",
      templateUrl: "partials/personnel.html",
      controller: 'FormController'
    })
});

我的FormController 看起来像这样：

angular.module('formApp')
.controller('FormController', function($scope) {
  $scope.formData = {};
});

这是我的表单的主要模板：

<div class="form-container" ng-controller="FormController">
  <section class="form-container__head">
    <div class="form-container__head__img-block">
      <img id="logo" src="http://url.com" />
    </div>
    <div class="form-container__head__title-block">
      <span class="form-container__head__title-block__title">FORM</span>
    </div>
  </section>
  <form class="form-container__form" method="post" action="index.php" enctype="multipart/form-data">
    <div ui-view autoscroll="true"></div>
    <pre>
      {{formData}}
    </pre>
  </form>
  <section class="form-container__footer">
    <label class="form-container__footer__text"></label>
    <label class="form-container__footer__dot">•</label>
    <label class="form-container__footer__text"></label>
    <label class="form-container__footer__dot">•</label>
    <label class="form-container__footer__text">www.site.com</label>
  </section>
</div>

这是信息部分的一部分：

<fieldset class="form-container__form__fieldset">
  <legend class="form-container__form__fieldset__heading"><h2>Information</h2></legend>
  <section class="form-container__form__fieldset__section">
    <div class="form-container__form__fieldset__section__field">
      <label class="form-container__form__fieldset__section__field__label">Number:</label>
      <input class="form-container__form__fieldset__section__field__input" ng-model="formData.number" type="text" name="number">
    </div>
  </section>
</fieldset>

我的目标是将某人键入的文本保存到上面的number 输入字段中，并将其保存以在另一个状态/视图中向下提交几步。

我不明白为什么当我在数字字段中输入数据时，我的主模板中 <pre> 中的 formData 表达式没有显示它。如果我将formData 表达式放在我有ng-model="formData.number" 的部分info 中，它确实显示正确。但是，一旦我离开info 状态，它就不会在任何其他状态下显示。如何解决这个问题？

我知道我可能缺少一些基本的东西，所以请指出正确的方向。

Answer 1

如果所有这些步骤确实属于一起并且不打算单独重复使用，这意味着这是一种真正的多步骤形式，您可以考虑将所有中间状态转移到一个处理多步骤过程的控制器中。

为此，您可以使用共享父状态的嵌套状态机制（并且可以在使用ui-view 将子视图包含在父模板中时共享父控制器）。因此，您可以在父控制器中管理状态并访问所有子视图中的数据。请注意，避免名称冲突是您的责任。

.state('multistep', {
  url: "/wizard",
  templateUrl: "partials/multistep-wrapper.html", // must contain a <ui-view/>
  controller: 'FormController'
})
.state('mutlistep.start', {
  url: "/start",
  templateUrl: "partials/start.html",
})
.state('multistep.info', {
  url: "/info",
  templateUrl: "partials/info.html",
})

不要在子状态中列出控制器，因为这会创建新的实例，从而阻止引用父级的能力。然后生成的 url 相对于父状态，因此状态 multistep.info 将在 wizard/info 下可用。

有关详细信息，请参阅 ui-router 文档中的示例：https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views#nested-states--views