Tom*_*Tom 3 angularjs angular-ui-router
我正在尝试创建一个Web应用程序,其中我有一个包含三个视图的index.html页面:标题,内容和页脚.
我希望页眉和页脚在页面之间保持一致,但同时不能成为index.html文件的一部分.
我也希望内容视图根据我去过的网址而改变.
这是我目前的解决方案
的index.html
<body>
<header ui-view="header"></header>
<main ui-view="content"></main>
<footer ui-view="footer"></footer>
</body>
app.js
$stateProvider
.state('my-app', {
abstract: true,
views: {
'header': {
templateUrl: 'partials/shared/header.html',
controller: "UserController"
},
'footer': {
templateUrl: 'partials/shared/footer.html'
}
}
})
.state('my-app.home', {
url: "/",
views: {
'content': {
templateUrl: 'partials/home.html',
controller: 'HomeController'
}
}
})
当我加载页面"/"时,它显示页眉和页脚正确加载,我可以在页面上看到它们,但主要内容丢失.
谁能告诉我我做错了什么？
谢谢
我设法搞清楚了.
我必须在我的子状态中获取视图以明确指向根状态中的视图.
要做到这一点,我不得不指向'content @'.
固定代码:
app.js
$stateProvider
.state('my-app', {
abstract: true,
views: {
'header': {
templateUrl: 'partials/shared/header.html',
controller: "UserController"
},
'footer': {
templateUrl: 'partials/shared/footer.html'
}
}
})
.state('my-app.home', {
url: "/",
views: {
'content@': {
templateUrl: 'partials/home.html',
controller: 'HomeController'
}
}
})
| 归档时间： |
|
| 查看次数： |
1169 次 |
| 最近记录： |