Angularjs 角度ui路由器:无法在视图中加载子状态页

Angularjs 角度ui路由器:无法在视图中加载子状态页,angularjs,angular-ui-router,state,Angularjs,Angular Ui Router,State,我使用的是AngularUI路由器。我想在父状态下显示用户搜索页面,在子状态下显示用户信息 app.js .state('users', { url: "/users", templateUrl: "app/views/user/userSearchPage.html", controller: "userCtrl" }) .state('users.edit', { url: "/:username/edi

我使用的是AngularUI路由器。我想在父状态下显示用户搜索页面,在子状态下显示用户信息

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"
      })
当我尝试加载子状态视图时,它仍然显示父状态视图


如何克服此问题?

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

注意控制器的双重实例。如果模板包含
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视图<代码>用户和
    编辑
    应该成为同级(正如我上面所建议的),并获得
    sticky:true
    ,并且应该为命名的ui视图定义模板

    .state('用户'{ url:“/users”, 斯蒂奇:是的, 观点:{ 搜索:{ templateUrl:“app/views/user/userSearchPage.html”, 控制器:“userCtrl” } } })
    .state('编辑'{ url:“/edit/:username”, 斯蒂奇:是的, 观点:{ 搜索:{ templateUrl:“app/views/user/tenantUser.html”, 控制器:“userCtrl” } } })

  • 在容器模板中定义两个ui视图,而不是一个

    <ui-view name="search"></ui-view>
    <ui-view name="edit"></ui-view>
    
    
    
  • 可能,但很粗糙。我不喜欢这种方法,因为它不能很好地扩展。
    州和你原来一样是孩子。应更改搜索模板
  • 
    在此处搜索所有现有标记
    当设置了适当的状态时,子模板将嵌套在此处
    但由于上面的部分会隐藏它,会模拟替换模板
    

    是,但当我处于子状态时,我只想显示
    app/views/user/tenantUser.html
    模板。我该怎么做?为什么不将子状态更改为同级状态?子状态也将继承父状态,但我不想这样做。当有搜索结果时,我会点击特定的记录,当我返回搜索页面时,我会显示用户信息,我必须显示相同的搜索结果。首先,记住以前的状态并返回那里不会有问题。简单的方法是将搜索参数添加到state及其url中,并能够返回到它。更复杂和保存搜索数据时,编辑一个项目将使用从ui路由器extrasYes我知道,但在这里,我们不更新状态中的搜索参数,如果我添加还需要更新状态中的6个参数。我的要求是在不改变状态参数的情况下,我必须显示搜索结果。当我进入用户信息页面并返回时,我必须显示搜索结果。可能吗?你能提出更好的方法吗?
    <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>