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组合来动态加载向导步骤模板,也就是说,如果您不介意为所有向导步骤共享同一个控制器:
<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
希望帮助别人!