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

Answer 1

我认为拥有<img>标记更容易，然后如果存在网址，则使用<a>标记向 wrap 编写指令。添加/包装比删除现有标签更清晰。

虽然您的视图中有一点点冗余，但您也可以在没有指令的情况下执行此操作：

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

Answer 2

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

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