AngularJS：（ng-）隱藏一個元素，但不隱藏它的子元素

Question

如何創建一個隱藏元素而不隱藏子元素的ng顯示指令？

我就在想，如果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>標籤如果URL存在。添加/包裝比刪除現有標籤更清潔。

雖然有冗餘的在你看來一個稍微有點你也可以做到這一點沒有一個指令：

<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>是一種過早的優化。