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输入字段中，并将其保存以便在另一个状态/视图中向下提交几步。

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

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

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",
})

不要在子状态中列出控制器，因为这会创建新实例，导致无法引用父实例。生成的网址相对于父状态，因此状态multistep.info将在wizard/info下可用。

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

在UI路由器视图/状态

1 个答案: