javascript - 没有嵌套的子状态的 UI 路由器

Question

您可以使用 Angular ui-router 来描述页面不嵌套的页面层次结构吗？

背景:

我正在开发一个小型网络应用程序，其中包含约 10 个单独的页面，这些页面形成了清晰的层次结构(即 仪表板 -> 学生 X -> 练习 Y -> 尝试 Z)。我希望能够在代码中表达这种层次结构，这样我就可以获得简单的面包屑和保留页面状态的后退按钮(而不是重新加载)。该项目已经为某些 subview 使用了 UI-router，因此在其之上构建此层次结构似乎也是合乎逻辑的。

但是我遇到的问题是:ui-router 将子状态加载到父状态内的 ui-view 中，而我希望它将它加载到与父状态相同的 ui-view 标签中，代替 parent 。

我理想的解决方案是我能够将一个额外的参数 replace-parent 写入状态描述，例如

  .state('student.profile', {
    url: '/profile',
    templateUrl: 'views/profile.html',
    controller: 'ProfileCtrl',
    replace-parent: true
  })

然后，当加载此状态时(并再次返回，当卸载子状态时)，这将用配置文件页面替换“学生”状态加载到的 ui View 。

谁能想出一个方法，用合理的手段大致达到这个结果？我自己能想到的最好的方法是监听 $stateChange 事件，然后牺牲一些山羊给全能的 JQuery，但我真的希望有一种漂亮的、 Angular 方式来做这件事。

Answer 1

我刚刚遇到了一个类似的问题，我想表达进度跟踪器的层次结构。似乎 UI Router 不支持不嵌套 View 的嵌套状态。

我倾向于这样解决:

.state('student', {
    url: '/student',
    templateUrl: 'views/student.html',
    controller: 'StudentCtrl'
})    
.state('studentProfile', {
    url: '/student/profile',
    templateUrl: 'views/profile.html',
    controller: 'ProfileCtrl'
})

请注意，状态保持不变，但 url 具有层次结构。这样，不需要 View 嵌套，但需要您在面包屑指令/代码中添加更多工作。

我也在寻找更好的解决方案。