FAQ для ui-router содержит раздел об интеграции с модальностями bootstrap $, но он ничего не говорит о абстрактных представлениях. У меня есть 3 представления под одним абстрактным видом, поэтому примерно следующее.
$stateProvider
.state('setup', {
url: '/setup',
templateUrl: 'initialSetup.html',
controller: 'InitialSetupCtrl',
'abstract': true
})
// markup for the static view is
<div class="wizard">
<div ui-view></div>
</div>
.state('setup.stepOne', {
url: '/stepOne',
controller: 'SetupStepOneCtrl',
onEnter: function($stateParams, $state, $modal) {
$modal.open{
backdrop: 'static',
templateUrl: 'setup.stepOne.html',
controller: 'SetupStepOneCtrl'
})
}
})
.state('setup.stepTwo', {
url: '/stepTwo',
controller: 'SetupStepTwoCtrl',
onEnter: function($stateParams, $state, $modal) {
$modal.open({
backdrop: 'static',
templateUrl: 'setup.stepTwo.html',
controller: 'SetupStepTwoCtrl'
})
}
})
.state('setup.stepThree', {
url: '/stepThree',
templateUrl: 'setup.stepThree.html',
controller: 'SetupStepThreeCtrl'
...
});
}]);
Я также попытался добавить блок onEnter в абстрактное состояние и удалить onEnter из каждого из трех дочерних состояний. На самом деле это кажется мне правильным. Абстрактное состояние инициализирует и открывает $modal, а последующие состояния должны интерполироваться, но когда я это пробовал, контейнер ui-view был пуст.
Я могу думать о некоторых других хакерских способах обхода этого, но думал, что попрошу посмотреть, есть ли канонический способ справиться с этим.
