Arh*_*yaa 11 javascript angularjs nested-views angular-ui-router
我正在使用嵌套视图处理我的UI-Router应用程序.我定义了一些这样的状态:
$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'},
'area2' : ... // still some other areas, not changing
}
})
使用该应用程序时,我将主视图划分为一些区域.在第一个区域,我使用特定的html文件.如果我点击链接,应用程序将进入子状态$state.go('myState').此时,URL已更改,但子视图未加载到页面中.
我在网站上搜索了答案,我发现这个问题来自另一个似乎在这里遇到同样问题的人:Angular Router - Url更改但视图无法加载
你知道我错过了什么吗？
抱歉英语不好
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:
在幕后,为每个视图分配一个遵循方案的绝对名称
viewname@statename,其中viewname是视图指令中使用的名称,状态名称是状态的绝对名称,例如contact.item.您还可以选择以绝对语法编写视图名称.例如,前面的示例也可以写成:
.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">
检查它在这里