Angular Несколько видов UI-Router
Я использую angular 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>
В My bulletinBoard.html я хочу иметь вложенное представление:
<div ui-view="tradeFeed"></div>
<div ui-view="newsFeed"></div>
Для страницы /newsFeed и страниц /tradeFeed это работает отлично, но для доски объявлений я не вижу ничего на странице. Где я иду не так?
Ответы
Ответ 1
Я нахожу пример в официальной вики GitHub очень неинтуитивным. Вот лучший вариант:
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)
'[email protected]': { template: ..... },
// another child view
'[email protected]': {
templateUrl: ......
}
}
});
Синтаксис каждого атрибута вида [email protected]
.
Ответ 2
Метод .state()
templateUrl
игнорируется при использовании объекта views
. См. Wi-router wiki для получения дополнительной информации:
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#user-content-views-override-states-template-properties