4

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

我已经尝试了很多努力来让它工作，包括让两个替代状态一个作为另一个的孩子（如下所示）导致只显示父级（步骤 3-a），并有一个抽象的父级步骤（步骤-3) 使用 url，然后是两个子步骤（step-3-a 和 step-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: {
        ...
      }
    })
4

1 回答 1

5

你做错了继承。父母和孩子应该用点分隔。您的配置应如下所示：

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

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

于 2013-09-26T11:51:59.263 回答