angularjs - angular-ui-router:无法在 View 中加载子状态页面

Question

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

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"
      })

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

如何克服这个问题？

Answer 1

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

谨防 Controller 的双重实例。如果模板包含 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"
})

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

1. 简单的方法是将搜索参数添加到 state 及其 url 中，并能够返回它。在这种情况下，Angular 将再次重新加载搜索页面。如果您在架构中遵循 REST 模式，即相同的查询参数始终定义相同的数据，则可以做到这一点。

2. 更复杂并在编辑项目时保存搜索数据的方法是使用 sticky states来自 ui-router-extras。您必须定义一个命名的 ui-view 来进行搜索和编辑。 users和edit应该成为 sibling (正如我上面建议的那样)并获得 sticky: true并且应该为命名的 ui-views 定义模板。

   .state('用户', { 网址:“/用户”， 粘性:真实， 观点:{ 搜索: { templateUrl: "app/views/user/userSearchPage.html", Controller :“userCtrl” } } })
   .state('编辑', { url: "/edit/:用户名", 粘性:真实， 观点:{ 搜索: { templateUrl: "app/views/user/tenantUser.html", Controller :“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>