3

我正在使用 angular-ui bootstrap modal 组件构建 angular 向导。在我的主页中，我已经在使用 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>

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

4

2 回答 2

0

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

于 2013-05-31T04:28:28.330 回答
0

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

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

于 2015-05-18T18:31:38.173 回答