[英]Angular UI-Router multiple views
我正在使用角度UI-Router。 我的路由配置中有以下內容
.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: ......
}
}
});
每個視圖屬性的語法是viewName@stateName
。
使用views
對象時,將忽略.state()
方法的templateUrl
。 有關更多信息,請參閱ui-router wiki: https : //github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#user-content-views-override-states-template-properties
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.