Angularjs 角度ui路由器:无法在视图中加载子状态页
我使用的是AngularUI路由器。我想在父状态下显示用户搜索页面,在子状态下显示用户信息 app.jsAngularjs 角度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
.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"
})
有了来自评论的更新信息,我可以提出三种解决方案:搜索、查找结果、编辑一个项目(全屏模板)、返回搜索并查看数据
编辑
应该成为同级(正如我上面所建议的),并获得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-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>