在angular的ng-switch中使用html模板

Nit*_*eli 11 html javascript angularjs ng-switch

我正在创建一个随用户点击一起移动的"交互式菜单".我想知道是否有办法在ng-switch中包含html模板,因为每个'switch'中的所有逻辑都不同 - 它将导致巨大的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>
Run Code Online (Sandbox Code Playgroud)

Alw*_*ner 20

用途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>
Run Code Online (Sandbox Code Playgroud)

注意:如果您对路径进行硬编码,请不要忘记使用双引号内的单引号.


Jér*_*eil 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> 
Run Code Online (Sandbox Code Playgroud)

  • 从Angular 1.2开始,你不能在ng-switch中使用ng-include.如果你想要比@ CodeHater的答案更少的标记,请使用<div ng-if ="selection === 1"ng-include ="'html/template1.html'"> </ div> (4认同)