FAQ for ui-router有一个关于与bootstrap $ modals集成的部分，但它没有提到任何关于抽象视图。我有一个单一的抽象视图下有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',$modal) {
$modal.open({
backdrop: 'static',templateUrl: 'setup.stepTwo.html',controller: 'SetupStepTwoCtrl'
})
}
})
.state('setup.stepThree',{
url: '/stepThree',templateUrl: 'setup.stepThree.html',controller: 'SetupStepThreeCtrl'
...
});
}]);
我也试图只添加onEnter块到抽象状态，并从3个子状态中的每一个删除onEnter。这在我看来似乎是正确的方法。抽象状态初始化并打开$ modal，后续的状态应该插入，但是当我尝试这个ui-view容器是空的。
另一种方法是在$ modal控制器中使用ng-switch和ng-include组合来动态加载向导步骤模板，也就是说，如果您不介意为所有向导步骤共享同一个控制器：
原文链接：https://www.f2er.com/angularjs/145355.html<div ng-switch="currentStep.number">
<div ng-switch-when="1">
<ng-include src="'wizardModalStep1.html'"></ng-include>
</div>
<div ng-switch-when="2">
<ng-include src="'wizardModalStep2.html'"></ng-include>
</div>
<div ng-switch-when="3">
<ng-include src="'wizardModalStep3.html'"></ng-include>
</div>
</div>
Here is Plunker with working example: 07000
希望帮助别人！
