0

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

<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 的角度方式是什么？

4

1 回答 1

0

使用 ngIf。

来自 Angular 文档：

ngIf 指令基于 {expression} 删除或重新创建 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 避免了这种情况。

于 2015-04-03T20:24:15.790 回答