angular中如何动态创建、删除元素

[LeeGenD]

angular中如何动态创建、删除元素

最近碰到了一个场景，由于业务需求需要实现一个比较复杂的列表。 功能如下：

• 列表的数据是多层级的
• 支持用户自定义显示那一列

为了实现以上功能，做了两个处理：

• 将server返回的数据打平为一级数据，加上特殊标识表示层级
• 保存用户需要展示的列信息到数组中，再使用ng-repeat配合ng-include显示出来

如下：

<table>
  <tbody>
    <tr ng-repeat="item in list">
        <td ng-repeat="f in fields">
            <div ng-include="f.templateName"></div>
        </td>
    </tr>
  </tbody>
</table>

虽然ng-include的内容是内联的，但是实现这个功能后，列表渲染的速度变得非常的慢了，大概1000ms。

经过排查发现是由于ng-repeat嵌套并且ng-include在ng-repeat里会重复加载导致性能变低，只好自己实现动态添加模板元素到列表里，如下:

var tpl = 'xxx';// 计算得到的模板，用户操作选择哪些展现列后会重新计算模板
var $tbody;// 列表元素的tbody
var content = $compile(tpl)(scope);
$tbody.append(content); 

由此将渲染时间大大缩减到了250ms左右。但是当用户进行了显示列表更换操作后渲染时间又会增加，最后发现原因是没有删除刚添加的动态模板元素，需要在新增dom时，增加如下代码：

content.remove();

或者：

content.replaceWith(newContent);

加上代码后dom不会重复出现了页面上了，但是发现js输出里面还是有重复渲染的痕迹，性能也并没有保持稳定，还是会下降。最后改为如下代码，在每次删除元素的时候也删除scope即可：

/*
* 创建时
*/
var tpl = 'xxx';// 计算得到的模板，用户操作选择哪些展现列后会重新计算模板
var $tbody;// 列表元素的tbody
var nowScope = scope.$new();// 这里需要创建新的scope，防止销毁时销毁原scope
var content = $compile(tpl)(nowScope);
$tbody.append(content); 

/*
* 删除时
*/
content.remove();
nowScope.$destroy();