In Angular.js, is it possible to replace an ng-switch directive element with its contents?

Question

I'm using a switch to conditionally include different content. I want the inner content (e.g. welcome directive) to replace the parent ng-switch element. I know that you can do this with custom directives using the replace=true configuration property, but is this possible to do with built in directives such as ng-switch?

<div id="container">
    <ng-switch on="tabIndex">

        <welcome ng-switch-when="welcome"></welcome>

        <main ng-switch-when="main"></main>

        <help ng-switch-when="help"></help>

    </ng-switch>
</div>

For example, When the value of tabIndex is 'help', I want the following html to result:

<div id="container">

    <help><!-- contents of help template --></help>

</div>

I think its not possible with just the ng-switch directive. It just appends the correct switch-when to its main element. — Oliver, Jun 05 '13 at 13:12

score 8 · Answer 1 · answered Jun 05 '13 at 16:28

You'll always need the logic there, but you don't have to use an element for a switch. It'll work just as well as an attribute on the parent:

<div id="container" ng-switch on="tabIndex">
    <welcome ng-switch-when="welcome"></welcome>
    <main ng-switch-when="main"></main>
    <help ng-switch-when="help"></help>
</div>

In Angular.js, is it possible to replace an ng-switch directive element with its contents?

1 Answers1