Question

我想知道在运行类似向导的设置时如何将三个状态连接在一起。我正在开发的应用程序有一个“参数”屏幕，用户可以通过3个步骤输入一些参数。这三个步骤应该在同一页面上连接，但只有在需要填写特定步骤时才能看到当前步骤。

有点像这样：

用户从：parameters/step-1

开始

第一个div是可见的
隐藏第二个div（或处于某种阻塞/锁定状态）
隐藏第三个div（或处于某种阻塞/锁定状态）

用户填写第1步并导航至parameters/step-2

第一个div是可见的
第二个div是可见的
隐藏第三个div（或处于某种阻塞/锁定状态）

用户填写第2步并导航至parameters/step-3

第一个div是可见的
第二个div是可见的
第三个div是可见的

这是我目前的设置，这是正确的方法，还是我应该使用嵌套视图，然后根据当前路线手动显示/隐藏每个视图？如果是这样，我该怎么做？

.state('test.parameters', {
  url: "/parameters",
  templateUrl: "views/partials/enter-parameters.html"
})
.state('test.parameters.step1', {
  url: "/step-1",
  templateUrl: "views/partials/step1.html"
})
.state('test.parameters.step2', {
  url: "/step-2",
  templateUrl: "views/partials/step2.html"
})
.state('test.parameters.step3', {
  url: "/step-3",
  templateUrl: "views/partials/step3.html"
})

Answer 1

This article on the ng-newsletter website描述了您的确切示例。有人也评论了这篇文章并添加了Wizard jsFiddle。我已经调整了文章中的代码以适合您的示例。

要回答这里的问题，您要做的是将test.parameters设置为抽象状态，这意味着您不能直接引用它，但它确实为您提供了test.parameters的抽象URL。一旦抽象状态的子节点被导航到（由用户或脚本中的一部分），该URL将与子URL一起更新为抽象状态的URL（在您的情况下将是[ mainUrl] /参数/ TEST1）。每个test.parameters.step [x]状态都是抽象状态的子节点，您可以使用您提到的templateUrl中的标记中的sref元素在它们之间切换。我离开了$ urlRouterProvider，向您展示如何访问抽象状态的第一步。

$urlRouterProvider.otherwise('/test.parameters/step1');

$stateProvider
.state('test.parameters', {
    abstract: true,
    url: '/parameters',
    templateUrl: "views/partials/enter-parameters.html"
})
.state('test.parameters.step1', {
    url: '/step1',
    templateUrl: "views/partials/step1.html"
})
.state('test.parameters.step2', {
    url: '/step2',
    templateUrl: "views/partials/step2.html"
})
.state('test.parameters.step3', {
    url: '/step3',
    templateUrl: "views/partials/step3.html"
})

angular ui-router，如何使用更新的URL嵌套状态

1 个答案: