Day*_*yan 7 angularjs angular-ui-router
如果我有index.html:
<body>
<ui-view="home"></home>
</body>
然后在该主视图中我frame.html使用以下内容进行渲染:
<div ui-view="home_content"></div>
在我,app.js我一直试图获得最内在的ui-view内部frame.html渲染另一个HTML模板.我能够在home视图中渲染内容很好但没有渲染内部home_content.
我的app.js ui-router代码
$stateProvider
.state('user', {
abstract: true,
template: '<ui-view/>',
data: {
access: AccessLevels.user
}
})
.state('user.home', {
url: '/home',
views: {
'home@': {
templateUrl: 'app/partials/home/frame.html',
controller: 'homeCtrl'
},
'home_content@home': {
templateUrl: 'app/partials/home/dashboard/index.html',
controller: 'dashboardCtrl'
}
}
});
好像我可能会出现这种错误,不确定上述是否是正确的方法.
我希望您希望在子级中定位父级的未命名视图，因此该视图应如下定义：
$stateProvider
// here we define parent
.state('user', {
abstract: true,
// parent has UNNAMED view
template: '<ui-view/>', // this will be injected into index.html
... // ui-view=""
})
// child will partilly target parent
// and also itself
.state('user.home', {
url: '/home',
views: {
// here we target parent UNNAMED view
'': {
...
},
// here we target current state
// so we should use state name
'home_content@user.home': {
...
}
}
});
也可以使用的不是'' : { }我们可以使用'@home' : {} （请参阅下面的文档）。
如果（如下面的评论中提到的）我们有index.html，其目标名为home：
<div ui-view="home"></div>
我们可以使用这个 plunker，它重新定义父抽象状态，如下所示：
$stateProvider
.state('user', {
abstract: true,
data: {
...
},
views : {
'home' : {
template: '<div ui-view=""></div>',
}
}
})
检查文档
在幕后，每个视图都会被分配一个遵循 方案的绝对名称
viewname@statename，其中 viewname 是视图指令中使用的名称，state name 是状态的绝对名称，例如 contact.item。您还可以选择以绝对语法编写视图名称。例如，前面的例子也可以写成：
.state('report',{
views: {
'filters@': { },
'tabledata@': { },
'graph@': { }
}
})
| 归档时间： |
|
| 查看次数： |
6530 次 |
| 最近记录： |