AngularJS 指令包装器使用 Kendo 泄漏内存答案

【问题标题】：AngularJS Directive wrapper leaking memory with KendoAngularJS 指令包装器使用 Kendo 泄漏内存
【发布时间】：2014-10-15 19:10:14
【问题描述】：

已经有一段时间了，所以我现在正在寻找一些外部帮助。基本要点是我们在应用程序中使用 Kendo，但我们希望为提供的每个内置 kendo 指令创建指令包装器。这允许以更可重用的格式为我们的应用程序覆盖功能并处理我们想要的事情。也就是说，我注意到使用直接 kendo-drop-down-list 指令时没有出现的一些内存泄漏错误。

这个例子的 plunkr 可以在这里访问：http://plnkr.co/edit/SXhrkGbMnRRgDjI3v2kR?p=preview

下面包含我希望通过覆盖指令控制器内的功能来实现的标记。

 <div dir-custom-dropdown="row.controls.customDDL" data-text-field="textfield" 
                data-value-field="textfield" data-datasource="row.dsSearchAndOr" data-ng-model="row.properties.searchAndOr"></select>

我使用的可重新创建步骤是通过单击前两行上的添加行来创建 2 个新行。单击第二行上的删除行两次以返回到一行。在 Chrome 开发工具中拍摄堆快照，再重复该过程 2 次，然后比较在 Snapshot 1 和 2 之间分配的对象。还有更多信息仍然分配，我有点困惑是什么持有它。

屏幕和剩余部分的示例也可以在此处找到以进行比较：http://imgur.com/LcHhljq

我尝试在某一点保留对 kendo-drop-down-list 的引用并手动调用其方法，但在 kendo.all.js 中的销毁这一行出现错误：

那个._arrow.off();

_arrow 未定义。所以我不确定是否有推荐的方法来清理它，或者这只是不支持，但我们确实需要为 kendo 指令提供包装器来定制我们的应用程序需求。

我确定在为下拉菜单创建隔离范围时我做错了，但这就是我想要走的路。我没有做任何明显的清理工作都会很棒。

【问题讨论】：

我可能已经弄清楚了。在 $scope.$on("$destroy", function() 中，我必须手动调用 kendo 的 destroy 方法。我遇到了问题，因为我通过 $index 而不是 row.id 值跟踪 ng-repeat . 添加新项目时，范围会被破坏。稍后我会写一个完整的答案。

标签： javascript angularjs memory-leaks kendo-ui

【解决方案1】：

我们在 kendo ui 小部件和内存泄漏方面遇到了类似的问题。我们的案例专门与路由有关。当新路由生成新的 HTML 时，来自先前路由的任何 kendo 小部件将永远不会被清理，因此我们有内存泄漏。

一个有效的修复方法是在路由更改之前清理现有的 HTML。因此，无论我们通过以下方式更改新路线：

$location.path('/my/new/route')

我们执行一些额外的代码来清除先前视图中的 HTML：

kendo.destroy(document.body);
$('.view-root-node').html('');

第一行清除 HTML 中的所有 kendo 小部件。第二行还清理了可能遗漏的任何其他内容，包括孤立的事件处理程序等。这种组合确保即使在负载下内存也保持不变。

... 这为我们解决了问题。

【讨论】：