Jquery 使用Angular在ng repeat中的特定位置注入唯一的DOM元素

我有一个复杂的类似网格的指令，它绑定到一个长列表模型对象。对于我的一个应用程序，我有一个列表，其中我需要在选中的行中插入指令。代码类似于

<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在视图间工作的角度方式是什么？

使用ngIf

从角度文档：

ngIf指令删除或重新创建DOM树的一部分 基于{表达式}。如果指定给ngIf的表达式计算 如果设置为false值，则该元素将从DOM中删除，否则 元素的克隆将重新插入DOM

---

如果您担心性能，请使用ngShow。DOM操作成本很高，ngShow避免了这一点

不确定我是否了解您需要什么，但您可以使用推送方法吗？例如：$scope.items.pushnewItem；我不想在模型中插入更多的项，而是希望在DOM中只有一个复杂元素的实例，并将其动态地放置在另一个给定的DOM元素中。谢谢您的回答。现在，我在ng秀上就是这么做的，但感觉很迟缓。I thiink Angular为每一行将复杂元素添加到DOM中，即使条件求值为false，也可能是错误的。出于一个我不太明白的原因，ng if不起作用，但ng show起作用……数百个不应该导致任何性能问题或行为迟缓。您是否在指令中使用jquery选择器？我怀疑不是摘要循环导致了这个问题，它确实使用了jquery。当加载到ng repeat之外时，它相当大…感谢您花时间回答。我接受你的回答。

<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>