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

Question

ui-router的FAQ有一个关于与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',
     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块添加到抽象状态,并从3个子状态中的每一个中删除onEnter.这在我看来似乎是正确的方法.抽象状态初始化并打开$ modal,后续状态应该插入,但是当我尝试这个时,ui-view容器是空的.

我可以想到其他一些hacky方法来解决这个问题,但我想我会问是否有一种规范的方法可以解决这个问题.

Answer 1

另一种方法是使用ng-switch与ng-include内线组合$modal控制器动态负载向导一步的模板，那就是如果你不介意分享同一个控制器的所有向导步骤：

<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>

这是带有工作示例的 Plunker：http ://plnkr.co/edit/Og2U2fZSc3VECtPdnhS1?p=preview

希望对某人有所帮助！！

Answer 2

我不确定您每次进入下一步时都想触发模式。

我认为您所要做的就是创建一个模态视图（），然后每个步骤都有一个分配给它的模态 templateUrl 。

每个模板应如下所示：

<div class="modal fade in" id="whatever" style="display:block">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <a ui-sref="next_page_route_id" type="button" class="btn btn-primary">Next</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal-backdrop fade in"></div>

在最后一个屏幕上，您可以将 data-dismiss="modal" 添加到提交中，然后就完成了