How would one go about creating an ng-show like directive that would hide an element but not the child elements?
I was thinking if url variable exists angular template
<a ng-show-link="url" ng-href="{{url}}">
<img ng-src="picture.png" />
</a>
would print out
<a href="/url">
<img src="picture.png" />
</a>
, and if the url didn't exist
<img src="picture.png" />
. Would help cut out additional container elements when using with ng-repeat.
I think it would be easier to have an <img> tag, and then write a directive to wrap it with an <a> tag if a url is present. Adding/wrapping is cleaner than removing existing tags.
Though with a tad bit of redundancy in your view you could also do this without a directive:
<a ng-show="url" ng-href="{{url}}"><img src="picture.png" /></a>
<img ng-hide="url" src="picture.png" />
Create a custom directive and apply it on the <a> tag and pass the url in an attribute.
If the url is not defined, use JQuery dom manipulation to remove the <a> and keep <img> in it's place.
Although it is much simpler to just disable the link or use javascript:; in its place. Trying to remove the <a> is kind of premature optimization.