使用Angular在ng-repeat中的特定位置注入一個獨特的DOM元素

Question

我有一個複雜的網格類似指令，它綁定到一個長列表模型對象。對於我的一個應用程序，我有一個列表，我需要在選定的行中注入指令。該代碼是一樣的東西

<div id='grid-like' myComplexDirective style='display:none'></div> 

<div ng-repeat='item in items'> 
    <div class="data-row"> 
     <!-- stuff with item object --> 
     <button ng-click='insertControl()'></button> 
    </div> 
    <!-- Here is where i'd like to inject the grid-like control and show/hide when button is clicked --> 
</div> 

我必須這樣做，以避免複雜的組件的多個實例（現在，它包括各行中的具體取決於範圍的觸發值顯示/隱藏），因爲它是沉重，並使應用程序呆滯。 我試圖在insertControl方法中使用appendTo方法來移動jquery中的元素。不幸的是，只要我改變視圖，它就無法工作。經過一番研究後，我發現我需要使用Angular指令進行包含或使用$ compile。

什麼是角度的做jQuery的appendTo，可以跨視圖工作？

Answer 1

使用ngIf。

從角文檔：

的ngIf指令刪除或重新創建基於一個{表達式} DOM樹 的一部分。如果分配給ngIf的表達式將 評估爲false值，則將該元素從DOM中移除，否則將該元素的一個 克隆重新插入到DOM中。

<div ng-repeat='item in items'> 
    <div class="data-row"> 
     <!-- stuff with item object --> 
     <button ng-click='item.insertControl=true'></button> 
    </div> 
    <!-- Here is where i'd like to inject the grid-like control and show/hide when button is clicked --> 
    <div ng-if="item.insertControl"> 
     ... some complex control ... 
    </div> 
</div> 

如果你擔心性能使用ngShow代替。 DOM操作是昂貴的，ngShow避免了這一點。