angularjs - angular ウィザード ng-view および angularui モーダル

Question

angular-ui ブートストラップ モーダル コンポーネントを使用して、Angular でウィザードを構築しています。私のメイン ページでは、ナビゲーションに既に ng-views を使用しています。

目標は、これらのページの 1 つにモーダル ウィザードを作成することです。私が見る限り、ネストされた 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 の使用は魅力的でした、ありがとう。