我正在使用角度UI路由器。我的路线配置中包含以下内容
.config(function config($stateProvider) {
$stateProvider.state('newsFeedView', {
url: '/newsFeed',
controller: 'newsFeedController',
templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html',
data: {
pageTitle: 'News Feed'
}
})
.state('tradeFeedView', {
url: '/tradeFeed',
controller: 'tradeFeedController',
templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html',
data: {
pageTitle: 'Trade Feed'
}
})
.state('bulletinBoard', {
url: '/bulletinBoard',
views: {
'tradeFeed': {
url: "",
controller: 'tradeFeedController',
templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html'
},
'newsFeed': {
url: "",
controller: 'newsFeedController',
templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html'
}
},
templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html'
});
})
在索引页面中,我只是使用以下方法调用视图:
<div class="container" ui-view></div>
在我的bulletinBoard.html中,我想要一个嵌套视图:
<div ui-view="tradeFeed"></div>
<div ui-view="newsFeed"></div>
对于/ newsFeed页面和/ tradeFeed页面,它可以正常工作,但是对于公告板,我看不到页面上的任何内容。我要去哪里错了?
我发现官方GitHub Wiki上的示例非常不直观。这是一个更好的选择:
https://scotch.io/tutorials/angular-routing-using-ui-router
例如:
...
.state('bulletinBoard', {
url: '/bulletinBoard',
views: {
// the main template will be placed here (relatively named)
'': { templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html' },
// the child views will be defined here (absolutely named)
'tradeFeed@bulletinBoard': { template: ..... },
// another child view
'newsFeed@bulletinBoard': {
templateUrl: ......
}
}
});
每个view属性的语法为viewName@stateName
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句