angularjs - 使用 angular-ui-router 和 bootstrap $modal 创建一个多步骤向导

Question

FAQ for ui-router有一个关于与 bootstrap $modals 集成的部分，但它没有提到任何关于抽象 View 的内容。我在一个抽象 View 下有 3 个 View ，如下所示。

 $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 block 添加到抽象状态，并从 3 个子状态中的每一个中删除 onEnter。在我看来，这实际上是正确的方法。抽象状态初始化并打开 $modal 并且后续状态应该插入到 中，但是当我尝试这个时，ui-view 容器是空的。

我可以想出一些其他的方法来解决这个问题，但我想我会问是否有一个规范的方法来处理这个问题。

Answer 1

另一种方法是使用 ng-switch与 ng-include内部组合$modal Controller 动态加载向导步骤模板，也就是说，如果您不介意为所有向导步骤共享相同的 Controller :

<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: http://plnkr.co/edit/Og2U2fZSc3VECtPdnhS1?p=preview

希望对某人有所帮助!