angularjs - AngularJS：（ng-）隐藏一个元素但不隐藏它的孩子

Question

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

我在想url变量是否存在角度模板

<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 一起使用时，将有助于减少额外的容器元素。

score 3 · Accepted Answer

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

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

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

score 0 · Accepted Answer

创建一个自定义指令并将其应用于<a>标签并在属性中传递 url。如果未定义 url，请使用 JQuery dom 操作来删除<a>并保留<img>在它的位置。

尽管仅禁用链接或javascript:;在其位置使用要简单得多。试图删除<a>是一种过早的优化。

2 回答 2