使用 angular-ui，特别是使用 ui-router 模块来执行一些嵌套 View 。我在部分内容中渲染部分内容时遇到问题:
嵌套如下:
index.html
-main.form.html
-main.sidebar.html
-sidebar.slider.html
我当前的 app.js 设置是:
$stateProvider
.state('main', {
url: '/',
views: {
'sidebar': {
templateUrl: 'views/partials/main.sidebar.html',
views: {
'slider': {
templateUrl: 'views/partials/sidebar.slider.html'
}
}
},
'form': {
templateUrl: 'views/partials/main.form.html',
},
'tribute': {
templateUrl: 'views/partials/main.tribute.html',
},
'submit': {
templateUrl: 'views/partials/submit.html',
}
}
})
所有其他部分加载，我可以看到 ui-view 指令在浏览器中加载，但实际部分未渲染(div 仅包含 ui-view="sidebar.slider" 文字)
有什么想法吗？
最佳答案
一个状态内部的 View 嵌套是通过它们的 relative/absolute 完成的 View 名称(不通过对象嵌套)
假设 templateUrl 包含 ui-view="slider"，那么我们必须绝对定位该 View 名称
$stateProvider
.state('main', {
url: '/',
views: {
'sidebar': {
templateUrl: 'views/partials/main.sidebar.html',
},
// this view definition is on the same level
// but the absolute name says, that it should be searched
// inside of the 'main' state
'slider@main': {
templateUrl: 'views/partials/sidebar.slider.html'
},
...
这里的关键是 View 'slider@main'的名称，它包含 View 名称'slider'分隔符'@'和状态名称'main'。检查以下内容以了解更多详细信息:
关于javascript - UI Router 中的双重嵌套 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24638677/