Javascript 不嵌套子状态的UI路由器

您能否使用Angular ui router来描述页面未嵌套的页面层次结构

背景：

我正在开发一个小型web应用程序，其中包含约10个独立页面，形成清晰的层次结构（即。 仪表板->学员X->练习Y->尝试Z）。我希望能够用代码表达这种层次结构，这样我就可以得到简单的面包屑和一个保留页面状态的后退按钮（而不是重新加载）。该项目已经将UI路由器用于某些子视图，因此在其上构建此层次结构似乎也是合乎逻辑的

然而，我遇到的问题是：ui路由器将子状态加载到父状态内的ui视图中，而我希望它加载到父状态所在的同一ui视图标记中，而不是加载到父状态中

我的理想解决方案是，只需在状态描述中写入一个额外的参数

replace parent

，如

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

然后，当加载“学生”状态时（当卸载子状态时），它会将加载“学生”状态的ui视图替换为配置文件页面

---

有人能想出一种方法，用合理的手段大致达到这个结果吗？我所能想到的最好的方法就是听$stateChange事件，然后牺牲几只山羊给JQuery allgighty，但我真的希望有一种漂亮的、有角度的方式来做这件事。

我遇到了一个类似的问题，我想表达一个进度跟踪器的层次结构。如果不嵌套视图，UI路由器似乎不支持嵌套状态

我倾向于这样解决它：

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

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

---

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

你能找到其他解决方案吗？这个怎么样？