Question

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

背景：

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

然而，我遇到的问题是这样的：ui-router将子状态加载到ui-view INSIDE父状态，而我希望它将它加载到父进程所在的ui-view标记中，父母的INSTEAD。

我理想的解决方案是让我能够在状态描述中编写额外的参数replace-parent，例如

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

然后将在加载此状态时替换用于配置文件页面加载'student'状态的ui-view（并且在卸载子状态时再次返回）。

有人能想出办法用合理的方法大致实现这个结果吗？我能想到的最好的事情就是听$ stateChange事件然后牺牲一些山羊到JQuery全能，但我真的希望有一种非常有棱角的方式来做它。

Answer 1

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

我倾向于像这样解决它：

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

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

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

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

1 个答案: