Question

我正在使用角度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"
      })

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

我该如何克服这个问题？

Answer 1

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

小心控制器的双重实例。如果模板包含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"
})

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

简单的方法是将搜索参数添加到state及其url并能够返回到它。在这种情况下，angular将再次重新加载搜索页面。如果您在架构中遵循REST模式，则可以执行此操作，即相同的查询参数始终定义相同的数据。
编辑项目时更复杂和保存搜索数据的方法是使用ui-router-extras中的sticky states。您必须为搜索和编辑定义命名的ui视图。 users和edit应该成为兄弟（正如我上面提到的那样）并获得sticky: true，并且应该为命名的ui-views定义模板。

.state（'users'，{ url：“/ users”，粘：真的，观点：{ 搜索：{ templateUrl：“app / views / user / userSearchPage.html”，控制器：“userCtrl” } } }）
.state（'edit'，{ url：“/ edit /：username”，粘：真的，观点：{ 搜索：{ templateUrl：“app / views / user / tenantUser.html”，控制器：“userCtrl” } } }）

在容器模板中，您可以定义两个ui-views而不是一个

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

可能但很粗糙。我不喜欢这种方法，因为它不能很好地扩展国家就像你原来一样是孩子。应更改搜索模板

<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-router：无法在视图中加载子状态页面

1 个答案: