AngularJS:(ng-)隐藏一个元素而不是它的子元素

Question

如何创建一个类似 ng-show 的指令来隐藏元素而不是子元素？

我在想如果 url变量存在 Angular 模板

<a ng-show-link="url" ng-href="{{url}}">
  <img ng-src="picture.png" />
</a>

会打印出来

<a href="/url">
  <img src="picture.png" />
</a>

，如果 url不存在

<img src="picture.png" />

.与 ng-repeat 一起使用时，将有助于减少额外的容器元素。

Answer 1

我认为拥有 <img> 会更容易标签，然后写一个指令用 <a> 包裹它如果存在 url，则标记。添加/包装比删除现有标签更干净。

尽管在您看来有一点冗余，但您也可以在没有指令的情况下执行此操作:

<a ng-show="url" ng-href="{{url}}"><img src="picture.png" /></a>
<img ng-hide="url" src="picture.png" />