在 Angular 的 ng-switch 中使用 html 模板答案

【问题标题】：Using html templates in angular's ng-switch在 Angular 的 ng-switch 中使用 html 模板
【发布时间】：2013-12-04 09:24:31
【问题描述】：

我正在制作一个随着用户点击而移动的“交互式菜单”。我想知道是否有办法在 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>

【问题讨论】：

标签： javascript html angularjs ng-switch

【解决方案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>

【讨论】：

【解决方案2】：

您应该可以使用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>

【讨论】：

这是更好的答案，因为它使用较少的标记（ng-include 并打开相同的元素）
对不起，我的错误好像有问题：github.com/angular/angular.js/issues/4731
从 Angular 1.2 开始，您不能在 ng-switch 中使用 ng-include。如果您想要的标记少于@CodeHater 的答案，请使用
可以通过调整指令本身来做到这一点，以便 templateUrl 仅在开关上加载
我在使用这个方法时遇到错误Error: [$compile:multidir] Multiple directives [ngSwitchWhen, ngInclude] asking for transclusion on: <div ng-switch-when="1" ng-include="'temp1.html'">

【解决方案3】：

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

注意：如果您对路径进行硬编码，请不要忘记在双引号内使用单引号。

【讨论】：

+1 只是为了指出必须使用单引号以及双引号的关键点。如果不使用，模板将不会显示。