问题
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.
<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>
回答1:
Use 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.
回答2:
You should be able to do it with ng-include
directive :
<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>
回答3:
**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>
来源:https://stackoverflow.com/questions/20095032/using-html-templates-in-angulars-ng-switch