ng重复速度问题。是否可以在AngularJS中重用DOM部分？

Question

我正在显示包含大量数据的列表，并且速度非常快（> 5个条目=太慢）。我修改了一下，发现不是数据量是问题，而是生成的许多DOM元素。

我只显示一些包含元信息的表格。对于每个表行，还有两个隐藏的表行，包括所有详细数据和编辑表单。单击一行打开详细信息，然后单击某些编辑按钮切换到编辑行 没有编辑部分的简化plunkr可用here。

问题在于，每个条目都会生成三行，其中包含大量标签和数据。分页不是解决方案，因为问题已经以很少的4或5个条目显着地表现出来。我可以动态加载细节数据，但我发现瓶颈是ng-repeat必须创建的许多标签。 （我在这里弄错了吗？）
当我剪切细节和编辑部分时，即使有10个以上的条目，页面加载也相当快。

解决方案可能是编写细节并编辑一次并隐藏它，然后将其动态移动到相应的条目。我知道直接的DOM操作在Angular中是不受欢迎的。有更好的解决方案吗？ A plunkr that illustrates the idea

Answer 1

我调查了angular.element并用解决方案更新了第二个plunkr。我仍然不确定是否有更优雅的解决方案。我将实现它，看看它是否解决了性能问题。

移动DOM部分：

<td id="detailPiece">
  Reuse this piece of DOM? Can it be done?<br />
  Tons of detail information, with edit capability etc.<br />
  {{detailItem.detail}}
</td>

是通过

实现的

angular.element('#detail'+index).append( angular.element('#detailPiece') ); 

对于我来说，使用空表行和所有内容仍然看起来像'hacky'解决方案。