Question

我有一个使用AngularJS和AngularUI路由器ui-router制作的多页表单。每个步骤都有自己的URL（/ step1 - ＆gt; / step2 - ＆gt; / step3）。在步骤2，表单为用户提供2个选项之间的选择。根据选择的选项，我希望能够将用户发送到两种状态之一，但无论选择哪两种状态，我都希望URL更改为/ step3。

我已经尝试了很多努力来实现这一目标，包括将两个替代状态作为另一个的孩子（如下所示）导致仅显示父（步骤3-a），并且具有抽象父母步骤（步骤3）使用url然后两个子步骤（步骤3-a和步骤3-b）并使用onEnter事件和转换进行路由。这两个都无法正确显示内容（后者将用户踢出/ user / userId）。

必须有可能在这个庄园中路线，但我似乎无法使其工作。感谢任何帮助或建议。

由于

$stateProvider
    .state('form', {
      abstract: true,
      views: {
        ...
      }
    })
    .state('user-form', {
      url: '/user/:userId',
      parent: 'form',
      abstract: true,
      views: {
        ...
      }
    })
    .state('step-1', {
      parent: 'user-form',
      url: '/step1',
      data: {
        ...
      },
      views: {
        ...
      }
    })
    .state('step-2', {
      parent: 'user-form',
      url: '/step2',
      data: {
        ...
      },
      views: {
        ...
      }
    })
    .state('step-3-a', {
      parent: 'user-form',
      url: '/step3',
      data: {
        ...
      },
      views: {
        ...
      }
    })
    .state('step-3-b', {
      parent: 'step-3-a',
      data: {
        ...
      },
      views: {
        ...
      }
    })

Answer 1

你做的遗产错了。父母和孩子应该是分开的。您的配置应如下所示：

.state('step-3', {
  abstract: true,
  url: '/step3',
  data: {
    ...
  },
  views: {
    ...
  }
})
.state('step-3.a', {
  data: {
    ...
  },
  views: {
    ...
  }
})
.state('step-3.b', {
  data: {
    ...
  },
  views: {
    ...
  }
})

这样，两个子状态都将反映其父级的URL。

AngularJS UI-Router具有相同URL的多个状态

1 个答案: