我正在努力为下一个状态创建一个容器,将状态定义为 View ,分为页眉、容器、页脚。
下一个状态作为示例是博客,但我没有看到将其放入 View 的方法。
一个想法是将 HOME View 作为标准启动,但失败了。
查看:
<main>
<header ui-view="header"></header>
<content ui-view="home"></content>
<footer ui-view="footer"></footer>
</main>
状态:
.state('home',{
url:'/',
data: {
pageTitle: 'Home'
},
views: {
'': {
templateUrl: 'content/index.html',
},
'header@home': {
templateUrl: 'content/templates/header.html',
controller: 'HeaderController',
cache: false
},
'home@home': {
templateUrl: 'content/templates/home.html',
controller: 'IndexController',
cache: false
},
'footer@home': {
templateUrl: 'content/templates/footer.html',
//controller: 'FooterController',
cache: false
}
}
})
.state('home.blog',{
url : '/blog',
templateUrl : 'content/templates/blog.html',
controller : 'BlogController',
data: { pageTitle: 'Blog' },
access: {requiredLogin: false}
})
成功! :)
Plunker 示例:http://plnkr.co/edit/yRgqiAeEVQl2WVajGgG0?p=preview
最佳答案
在上面更新的问题中,您使用了 this plunker to show你是如何让它发挥作用的:
.state('home',{
url:'',
abstract: true,
views: {
'': {
templateUrl: 'index.html' // this
},
'header@home': {
templateUrl: 'header.html'
},
'footer@home': {
templateUrl: 'footer.html'
}
}
})
.state('home.index',{
url : '/',
templateUrl : 'home.html'
})
.state('home.blog',{
url : '/blog',
templateUrl : 'blog.html',
});
虽然该解决方案有效,但实际上不是您/我们应该采取的方式。因为父状态为“home”,所以注入(inject)未命名 View itslef
- templateUrl: 'index.html'
所以,现在又出现了 View header和footer,但它们确实与根不同(原始index.htm
)。它们的绝对名称将是“header@home”和“footer@home”(在代码片段中使用) - 一切似乎都正常。
但这是多余的。除非我们将布局移动到某种“layout”状态和“layout.html”
- Angular UI Router - Nested States with multiple layouts
- Nested states or views for layout with leftbar in ui-router?
为什么是多余的?因为 index.html
已经在运行(作为root
)并且它包含这些目标。它们的绝对名称是“header@”和“footer@”。这应该是要走的路。
为了明确起见,有 an updated plunker及其片段:
.state('home',{
url:'',
abstract: true,
views: {
'': {
template: '<div ui-view=""></div>'
},
'header': {
templateUrl: 'header.html'
},
'footer': {
templateUrl: 'footer.html'
}
}
})
.state('home.index',{
url : '/',
templateUrl : 'home.html'
})
.state('home.blog',{
url : '/blog',
templateUrl : 'blog.html',
});
检查更新here
关于javascript - Angular ui 路由器 : Container view and Default view,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32771562/