Ng-Include inside ng-switch should be allowed

[czjvic]

In angular 1.0.7 working:

<div ng-switch on="post.type">                    
    <div ng-switch-when="link" ng-include="'inc/add_postlink.html'" ></div>                      
    <div ng-switch-when="webvideo" ng-include="'inc/add_postlink.html'" ></div>                                          
</div> 

In angular 1.2 RC3
Error: Multiple directives [ngSwitchWhen, ngInclude] asking for transclusion.

[rvenugopal]

@czjvic

Please see #3584 (comment) and associated plunker.
Nesting the ng-include inside ng-switch-when worked for me.

<div ng-switch-when="link">
   <div ng-include="'inc/add_postlink.html'" ></div> 
</div>

[czjvic]

Sorry, you are right. But it's little bit annoying.

[btford]

There were several changes to the compiler WRT to this that should have fixed this.

If it's still a problem in 1.2.5, please let me know and I'll happily re-open this issue. Thanks!

[derekakers]

I'm seeing it in 1.2.8

[cranesandcaff]

I am seeing it in 1.2.7.

[caitp]

Yeah, you can't have multiple element transclusion directives on the same element. I'm not totally sure how it would work if you could. If anyone has any ideas how that should work, feel free to make a proposal.

[jmshal]

Is this an issue, or is this actually working as intended; disregarding all knowledge of Angular, it seems like it should work, but doesn't. It would be nice to know if this is at all an issue worth worrying about.

[r3m0t]

It is throwing an error instead of behaving strangely, which means it's working as intended. There isn't a sensible way to make this work.

However, maybe people would like an ng-include-inside directive which just replaces all the contents of the element instead of the element itself? Like ng-bind-template, but it would take a template URL instead of the template itself.

[jmshal]

I understand, but shouldn't ng-include function like your proposal of ng-include-inside, by default?

Removing all knowledge of development, and angular for that matter, combining these two directives seems like it should work as intended. Seen as you can work around it by nesting an ng-include within the ng-switch-when... sort of makes it seem like this is a 'bug' even though it may not be.

[r3m0t]

I don't think the template should restrict the structure of the output DOM like that. That would require all the transclusion directives like ng-include to only modify their insides, while other directives would be allowed to modify the element itself. For example, ng-if would only delete or recreate its contents, so if you had <div ng-if="message" class="error">{{message}}</div> and .error has a border, background and padding, it would be visible even when message is empty.

The solution would be to write <div ng-if="message"><div class="error">{{message}}</div></div>. Actually, this would also apply to combining the new ng-if and ng-include-inside.

I don't think there's any way to combine the two - ng-include wants to replace the element when the template has loaded. ng-if wants the element to be present/absent according to its condition. There's no way for ng-include to know that even though the template just loaded, ng-if is also working on that element.

It's the same if you make them target their contents - ng-include-inside wants to replace its contents when the template has loaded, ng-if wants its contents to be present/absent according to its condition. It's only when you make the two behave differently that you can have them on the same element. But I don't see any reason to say ng-include and ng-if should behave differently.

[r3m0t]

Actually, I think I meant to say the structure of the template should reflect the structure of the output. For example, <div ng-if="1" ng-include="'template.html'"> should result in
<template></template>, not
<div ng-if="1"><div ng-include="template.html"><template></template></div></div>.

This is especially important in tables when there isn't always an "intermediate" element you can add.

[bsed]

you can see this links :http://bennadel.github.io/JavaScript-Demos/demos/mixed-ng-switch/

[stefan-schweiger]

I still get the following error when I try to use ng-include in ng-switch (Angular 1.3.16 and also 1.4.0)

Multiple directives [ngSwitchWhen, ngInclude] asking for transclusion

<div ng-controller="MyController"> 
    <span ng-switch="x">
        <div ng-switch-when="true" ng-include="'partial.html'"></div>
        <div ng-switch-default>default</div>
    </span>
</div>

plunker

So what is the supposed way to do this now? or was this bug reintroduced?

[jharaphula]

Its wise to use Switch Case in place of if then else if you have more the 5 to 6 Conditions. Nice to read this article. Well described about in-build Switch directives. To make your learning easier here I am sharing one more link http://jharaphula.com/how-to-use-switch-case-in-angularjs. These are the pure examples.