使用 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。

来自 Angular 文档：

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 避免了这种情况。