javascript 在 angular 的 ng-switch 中使用 html 模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20095032/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using html templates in angular's ng-switch
提问by Nitsan Baleli
Im making an 'interactive menu' that moves along with user clicks. Im wondering if there is a way to include html templates in ng-switch, since all the logic is different in each 'switch' - it will result in huge html files.
我正在制作一个随着用户点击移动的“交互式菜单”。我想知道是否有一种方法可以在 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>
回答by AlwaysALearner
Use ngInclude:
使用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>
Note: Dont forget to use single quotes wrapped inside the double quotes if you are hard-coding the path.
注意：如果您对路径进行硬编码，请不要忘记使用包含在双引号中的单引号。
回答by Jérémy Dutheil
You should be able to do it with ng-includedirective :
您应该可以使用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>
回答by Mateen Kadwaikar
**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>
