我正在尝试创建一个 web 应用程序，其中有一个 index.html 页面，其中包含三个 View :页眉、内容和页脚。
我希望页眉和页脚在页面之间保持一致，但同时不属于 index.html 文件。
我还希望内容 View 根据我访问的网址进行更改。
这是我目前的解决方案
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'
}
}
})
当我加载页面“/”时，它显示页眉和页脚已正确加载，我可以在页面上看到它们，但缺少主要内容。
谁能告诉我我做错了什么？
谢谢
最佳答案
我设法弄明白了。
我必须让子状态的 View 显式指向根状态的 View 。
为此，我必须指向“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'
}
}
})
关于angularjs - Angular ui 路由器 - 在状态之间共享 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26734520/