12

ユーザーのクリックに合わせて移動する「インタラクティブメニュー」を作成しています。すべてのロジックが各「スイッチ」で異なるため、ng-switch に html テンプレートを含める方法があるかどうか疑問に思っています。巨大な html ファイルが作成されます。

<div class="content" ng-switch on="selection">
 <div ng-switch-when="1" >
   <h1>1</h1>
 </div>
 <div ng-switch-when="2">
   <h1>2</h1>       
 </div>
</div>
4

3 に答える 3

19

使用ngInclude:

<div class="content" ng-switch on="selection">
    <div ng-switch-when="1" >
        <ng-include src="'template1.html'"></ng-include>
    </div>
    <div ng-switch-when="2">
        <ng-include src="'template2.html'"></ng-include>
    </div>
</div>

注: パスをハードコーディングする場合は、二重引用符で囲まれた単一引用符を使用することを忘れないでください。

于 2013-11-20T11:48:46.137 に答える
11

ng-includeあなたはディレクティブでそれを行うことができるはずです:

<div class="content" ng-switch on="selection">
    <ng-switch-when="1" ng-include="//TEMPLATE PATH">
    <ng-switch-when="2" ng-include="//TEMPLATE 2 PATH">
</div>
于 2013-11-20T11:49:51.273 に答える
1 
   **I used ng-Include this way.**

    <!-- Main content -->
    <div class="row">

      <!-- right col -->
      <section class="col-lg-12">
        <ul class="nav nav-tabs responsive ui-tabbed" id="myTab">
          <li class="active">
            <a  data-ng-click=' main.active.tab = "tab-1" '>Tab 1</a>
          </li>

    </ul>
    <!-- end responsive tabs -->

    <div class="tab-content ui-tabbed-contents responsive">
    <div data-ng-switch = " main.active.tab ">
      <div data-ng-switch-when='tab-1' >
        <ng-include src="'tab-one.html'" ></ng-include>
      </div>

    </div>

    </div>


    </div>
    <!-- end main tabs container -->
    </section>
于 2015-03-30T09:25:48.307 に答える