angular-ui-路由器：无法在视图中加载子状态页面

Question

我正在使用 angular UI-路由器。我想在父状态下显示用户搜索页面，在子状态下显示用户信息。

app.js

.state('users', {
        url: "/users",
        templateUrl: "app/views/user/userSearchPage.html",
        controller: "userCtrl"
    })
      .state('users.edit', {
          url: "/:username/edit",
          templateUrl: "app/views/user/tenantUser.html",
          controller: "userCtrl"
      })

当我尝试加载子状态视图时，它仍然显示父状态视图。

我该如何克服这个问题？

Answer 1

当你定义一个child状态时，假设进入child状态时不会退出parent状态。因此，您看不到任何内容的原因是模板 app/views/user/userSearchPage.html 在标记中缺少 <ui-view></ui-view>。因为 edit 被定义为嵌套状态，所以模板也应该是嵌套的。嵌套在 ui-router 中的唯一方法是定义一个 ui-view 来为 child 模板提供一个占位符。

当心控制器的双重实例。如果模板包含 ng-controller="userCtrl" 将创建两个实例，一个由模板创建，另一个由路由器创建

如果您希望模板相互排斥，则不应定义嵌套状态。他们本质上是兄弟国家

.state('users', {
    url: "/users",
    templateUrl: "app/views/user/userSearchPage.html",
    controller: "userCtrl"
})    
.state('edit', {
    url: "/edit/:username",
    templateUrl: "app/views/user/tenantUser.html",
    controller: "userCtrl"
})

根据评论中的更新信息，我可以提出三种解决方案的方法，搜索，查找结果，编辑一项（全屏模板），返回搜索并查看数据。

简单的方法是将搜索参数添加到状态及其 url 并能够 return 到它。在这种情况下 angular 将再次重新加载搜索页面。如果您在架构中遵循 REST 模式，则可以做到这一点，即相同的查询参数总是定义相同的数据。
更复杂和在编辑项目时保存搜索数据将使用 ui-router-extras 中的 sticky states。您必须定义一个名为 ui-view 的搜索和编辑。 users 和 edit 应该成为同级（如我上面所建议的）并得到 sticky: true 并且应该为命名的 ui-view 定义模板。

.state('users', { url: "/用户", 粘性：真实，观点：{ 搜索： { 模板网址："app/views/user/userSearchPage.html"，控制器："userCtrl" } } })
.state('edit', { url: "/edit/:用户名", 粘性：真实，观点：{ 搜索： { 模板网址："app/views/user/tenantUser.html"，控制器："userCtrl" } } })

在容器模板中，您定义了两个 ui-view 而不是一个

<ui-view name="search"></ui-view>
<ui-view name="edit"></ui-view>

可能但很粗糙。我不喜欢这种方法，因为它无法很好地扩展。
状态是 child 和你原来的一样。应更改搜索模板

<div ng-show="$state.current.name.indexOf('.edit') >= 0">
  all your existing markup for search here 
</div>

 child template will be nested here when appropriate state is set
 but as the above part will hide it, will imitate replacing template
<ui-view></ui-view>

angular-ui-路由器：无法在视图中加载子状态页面

angular-ui-router:Unable to load child state page in view

state

angularjs

angular-ui-router