Question

我正在使用angular-ui bootstrap模态组件构建一个角度向导。在我的主页面中，我已经在使用ng-views进行导航。

目标是在其中一个页面上创建模态向导。据我所知，不支持嵌套的ng-views。如果可能的话，我想保持每一步向导作为外部资源。

目前实现这一目标的一种可怕方法就是达到这个目的：

<div id="wizardModal"  class="modal hide">
   <div class="modal-header">
      <div ng-show="isCurrentStep(1)">
          <p>Step1 header</p>
      </div>
      <div ng-show="isCurrentStep(2)">
          <p>Step2 header</p>
      </div>
      <div ng-show="isCurrentStep(3)">
          <p>Step3 header</p>
      </div>
   </div>
   <div class="modal-body">
      <div ng-show="isCurrentStep(1)">
          <p>Step1 body</p>
      </div>
      <div ng-show="isCurrentStep(2)">
          <p>Step2 body</p>
      </div>
      <div ng-show="isCurrentStep(3)">
          <p>Step3 body</p>
      </div>
   </div>
   <div class="modal-footer">
      <div ng-show="isCurrentStep(1)">
          <p>Step1 footer</p>
      </div>
      <div ng-show="isCurrentStep(2)">
          <p>Step2 footer</p>
      </div>
      <div ng-show="isCurrentStep(3)">
          <p>Step3 footer</p>
      </div>
   </div>
</div>

显然，上述情况是不可接受的，并会造成维护噩梦。是否有一种干净的方法来达到同样的效果？

Answer 1

使用ng-include就像魅力一样，谢谢。

Answer 2

您可以找到有关使用ng-view和ngRouter here创建向导式应用程序的教程。

我相信这种方法要好得多，因为你可以在每个步骤中拥有从主机表单继承范围的单独控制器，从而保留所有数据但分离逻辑。

角度向导ng-view和angularui模态

2 个答案: