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

我需要这样做以避免复杂组件的多个实例（现在，它包含在每一行中 shown/hidden 取决于范围的切换值）因为它很重并且使应用程序迟缓。我尝试使用 insertControl 方法中的 appendTo 方法移动 jquery 中的元素。不幸的是，一旦我改变视图，它就不起作用了。经过一些研究，我发现我需要将 Angular 指令与包含或使用 $compile.

一起使用

执行跨视图工作的 jquery appendTo 的 angular 方法是什么？

Answer 1

使用 ngIf。

来自 Angular 文档：

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the 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 避免了这一点。

使用 Angular 在 ng-repeat 的特定位置注入一个独特的 DOM 元素

Inject a unique DOM element in at a specific position in a ng-repeat using Angular

jquery

appendto

angularjs

transclusion