$stateProvider
.state('parent',{
url: "/parent",views: {
'area1': {templateUrl : 'parentView.html'},'area2' : ... // some other areas + template
}
})
.state('parent.child1',{
url: "/child1",views: {
'area1' : {templateUrl : 'child1View.html'},'area2' : ... // still some other areas,not changing
}
})
.state('parent.child2',{
url: "/child2",views: {
'area1' : {templateUrl : 'child2View.html'},not changing
}
})
当使用该应用程序时,我将主视图分为某些区域.在第一个区域,我使用一个特定的html文件.如果我点击一个链接,应用程序将使用$state.go(‘myState’)进入一个小孩状态.那时,URL被更改,但是子视图没有加载到页面中.
我在网站上搜索了答案,我发现这个问题来自另外一个似乎遇到同样问题的问题：Angular Router – Url changes but view does not load
你知道我错过了什么吗？
对不起,英文不好
解决方法
index.html很可能包含这些目标：
<body>
<div ui-view="area1"></div>
<div ui-view="area2"></div>
...
所以,如果父母和孩子都这样做,我们需要使用绝对命名：
.state('parent.child1',{
url: "/child1",views: {
'area1@' : {template : '<h2>child 1 area 1 </h2>'},'area2@' : {template : '<h2>child 1 area 2</h2>'},}
})
.state('parent.child2',{
url: "/child2",views: {
'area1@' : {template : '<h2>child 2 area 1 </h2>'},'area2@' : {template : '<h2>child 2 area 2</h2>'},}
})
我们来看一下doc：
View Names – Relative vs. Absolute Names
Behind the scenes,every view gets assigned an absolute name that follows a scheme of
viewname@statename,where viewname is the name used in the view directive and state name is the state’s absolute name,e.g. contact.item. You can also choose to write your view names in the absolute Syntax.For example,the prevIoUs example could also be written as:
.state('report',{
views: {
'filters@': { },'tabledata@': { },'graph@': { }
}
})
所以,我们的孩子需要使用1)查看目标名称2)分隔符@和3)状态名称(在我们的字符串中为空表示根)：’area1 @’
这些链接,类似于$state.go()现在将工作：
<a ui-sref="parent"> <a ui-sref="parent.child1"> <a ui-sref="parent.child2">
检查here
