Angular UI-Router多个视图

我正在使用angular度UI路由器。 我有我的路线configuration下面

.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页面这个完美的作品，但对于公告板，我看不到任何东西在页面上。 我哪里错了？

Answer 1

我发现官方的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 。

Answer 2

使用views对象时，忽略.state()方法的templateUrl 。 有关更多信息，请参阅ui-router wiki： https ： //github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#user-content-views-override-states-template-properties