0

This feels like a fairly basic feature in a templating engine, but I seem to be missing it somehow.

Assume a template like this:

<a ng-if="icon.link" href="icon.link">
    <i ng-class="['fa',icon.icon_class]"></i>
</a>
<span ng-if="!icon.link">
    <i ng-class="['fa',icon.icon_class]"></i>
</span>

This will accomplish what I want, but the downside is that it requires duplicating all the child elements whenever I want to conditionally use a different parent element.

Is there any way to do something like:

<span ng-if-include-children="!icon.link">
<a ng-if-include-children="icon.link" href="icon.link">
    <i ng-class="['fa',icon.icon_class]"></i>
</a>
</span>

Essentially I am just trying to figure out the best way to swap out a container element while not duplicating all of its contents.

Andy Groff
  • 2,660
  • 1
  • 21
  • 25
  • Can you share an example of this common feature in other templating engine? – miensol Jan 11 '16 at 20:12
  • @miensol, I was referring to all the server side templating I've done, where a simple if/else will let you swap parent elements without having to repeat all the children. – Andy Groff Jan 11 '16 at 20:25
  • 1
    I see 2x`if/else`. Not sure if it's better than copying short contents. For larger templates it usually pays off to extract partial and load it with `ng-include`. – miensol Jan 11 '16 at 20:48
  • 1
    Seems like you're trying to dynamically render a directive, which you would do with `$compile(template)(scope)` in the link method. – Daniel Lizik Jan 11 '16 at 20:51
  • Thanks for the advice. This issue has come up in larger templates which is why its an issue. I think for now a standard if, where the children are included, will work well enough. I'll look into the Dynamic directive rendering too. I'm not familiar with that. – Andy Groff Jan 11 '16 at 22:34

1 Answers1

1

The ng-if & ng-show/hide directives take place at the node level meaning if you are not displaying a parent node, you can expect the child node not to display as well.

to answer your question

Is there any way to do something like:

Yes, if you make a custom directive, however...

there is a better way

That being said, this is more of a cosmetic issue rather than an actual functionality issue - see my answer for a similar question here https://stackoverflow.com/a/34595198/1121919

Community
  • 1
  • 1
jusopi
  • 6,791
  • 2
  • 33
  • 44
  • I would say it's not cosmetic. The idea is that the HTML should be semantic, anything cosmetic will happen in CSS. – Andy Groff Jan 11 '16 at 20:28
  • In most cases I agree, but in this case you only have the following options: a) duplicate the DOM, which is the most semantic for the least effort on your part b) write a directive which will be the most semantic, period or c) go with CSS. You have to ask yourself, how many times do you plan to do this in your code? If it's a one-shot application, go with your `ng-if` solution, if it's all over, then B or C are your best bets. You're basically weighing purism vs pragmatism here. – jusopi Jan 11 '16 at 20:34