Using html templates in angular's ng-switch

Question

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>

AlwaysALearner · Accepted Answer · 2013-11-20 11:48:46Z

19

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.

answered Nov 20, 2013 at 11:48

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Devner Over a year ago

+1 just for pointing out the crucial point that one has to use single quotes as well, along with double quotes. If not used, the templates wont show up.

Jérémy Dutheil · Accepted Answer · 2013-11-20 11:49:51Z

11

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>

answered Nov 20, 2013 at 11:49

Jérémy Dutheil

6,1477 gold badges42 silver badges55 bronze badges

5 Comments

CarbonDry Over a year ago

This is the better answer as it uses less markup (ng-include and switch on the same element)

CarbonDry Over a year ago

Sorry, my mistake looks like there are problems: github.com/angular/angular.js/issues/4731

antoine Over a year ago

As of Angular 1.2, you can't use ng-include inside ng-switch. If you want less markup than @CodeHater's answer, use <div ng-if="selection===1" ng-include="'html/template1.html'"></div>

ericjam Over a year ago

Can this be done by tweaking the Directive itself so that templateUrl only loads on switch

ilyo Over a year ago

I get an error using this method

Error: [$compile:multidir] Multiple directives [ngSwitchWhen, ngInclude] asking for transclusion on: <div ng-switch-when="1" ng-include="'temp1.html'">

Mateen Kadwaikar · Accepted Answer · 2015-03-30 09:25:48Z

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>

answered Mar 30, 2015 at 9:25

Mateen Kadwaikar

4034 silver badges18 bronze badges

Collectives™ on Stack Overflow

Using html templates in angular's ng-switch

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related