ng-If doesn't work with ng-Include

[wardbell]

This doesn't work ... although it seems it should:

<div data-ng-if="oneChoice"  data-ng-include="'optionsRadio.html'"></div>                         
<div data-ng-if="!oneChoice" data-ng-include="optionsCheckbox.html'"></div>

This alternative works as expected:

<div data-ng-switch="oneChoice">
    <div data-ng-switch-when="true"  data-ng-include="'optionsRadio.html'"></div>                         
    <div data-ng-switch-when="false" data-ng-include="'optionsCheckbox.html'"></div>
</div>

[lucipacurar]

<div data-ng-if="oneChoice">
<div data-ng-include="'optionsRadio.html'"></div>
</div>

Did you try this?

[wardbell]

I haven't tried that. Thanks for the suggestion. But I must say, even if it worked, it would be less appetizing than ngSwitch. I really should be able to use ngIf in the same div, not in a wrapper div. It should be given the higher priority that ngSwitchWhen clearly has. In sum, that is a workaround, not a fix, and I think ngSwitch is the better workaround. Cheers.

[thenikso]

I'm having the same problem in 1.2.0rc1. @lucassp solution doesn't work for me.

Here is a plunker: http://plnkr.co/MtRpmI

[andr2]

This is really annoying bug. Met it immediately after migration to 1.2.0rc.
Tried to fix it, but didn't realize. Rollbacking...

[jbourassa]

Same as @andr2: couldn't fix, rolling back 😢

[jchapron]

Same as @thenikso. It's also worth noting that activating ng-if multiple times will add the ng-include multiple times too, as you can see on this plunker : http://plnkr.co/BJUu5E

[pthrasher]

So, after the rc2 upgrade, it appears part of the problem is fixed. ng-if + ng-include now works, but you still get extra elements when they're on the same tag.

http://embed.plnkr.co/IZfOLU/preview

[vojtajina]

<div ng-include="x" ng-if="y"></div> does not work, because we changed ng-include to use transclusion (aa2133a). The reason for this change was animations.

There are two workarounds for this issue:

1. nesting ng-include into ng-if (<div ng-if="y"><div ng-include="x"></div></div>). This was broken (http://embed.plnkr.co/IZfOLU/preview), but it's now fixed in the master.
2. do not use ng-if and rather hide it by setting the ng-include value to null (eg. scope.x = null;).

I agree, that as a user, I wanna be able to use ng-if together with ng-include as it is more expressive (workaround 1. is ugly, workaround 2. forces me to have another variable to store the old x value before setting it to null, so that I can bring it back). Hopefully we can solve this by teaching the compiler to allow multiple transclusions on the same element (#4217). This is however not trivial change and it's not gonna happen before 1.2.

There is another issue, that there is no error when a single element contain multiple transcluding directives. This issue will be fixed in 1.2 (see #4217).

I'm closing this issue and creating a new one for allowing multiple transcluding directives on the same element (#4357).

[vojtajina]

Ok, we decided to special case ng-if + ng-include to make this work, see #4726

Hopefully, we can solve this in a more general way in the future.