index.html:
<body>
<div ui-view="header"></div>
<div ui-view></div>
<div ui-view="footer"></div>
<div id="footer" class="container" />
</body>
应用程序.js:
.state('root', {
url: '',
abstract: true,
views: {
'header': {
templateUrl: 'views/header.html',
controller: 'HeaderCtrl'
},
'footer': {
templateUrl: 'views/footer.html'
}
},
data: {
requiresLogin: true
}
}).state('root.home', {
url: '/',
views: {
'@': {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
}
},
data: {
requiresLogin: true
}
})
所以我有一个页眉和页脚被正确调用并显示在屏幕上，但由于某种原因，我的 home.html 没有显示。目前，home.html 只包含一个 h1 标题“Home”。似乎正在为内容创建空间，但它只是没有显示它。
最佳答案
请试试这个
.state('root', {
url: '',
abstract: true,
views: {
'header': {
templateUrl: 'views/header.html',
controller: 'HeaderCtrl'
},
'main': {
template: '<div>This is default main content placeholder</div>'
},
'footer': {
templateUrl: 'views/footer.html'
}
},
data: {
requiresLogin: true
}
}).state('root.home', {
url: '/',
views: {
'main@': {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
}
},
data: {
requiresLogin: true
}
})
在 index.html 中:
<body>
<div ui-view="header"></div>
<div ui-view="main"></div>
<div ui-view="footer"></div>
<div id="footer" class="container" />
</body>
关于javascript - UI 路由器和 Angularjs : main content isn't being displayed，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36243586/