javascript - AngularJS 指令包装器使用 Kendo 泄漏内存

Question

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

可以在此处访问此示例的 plunkr:http://plnkr.co/edit/SXhrkGbMnRRgDjI3v2kR?p=preview

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

 <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 次，然后比较快照 1 和快照 2 之间分配的对象。仍然分配了更多信息，我有点困惑可能持有它。

屏幕和剩菜的例子也可以在这里找到以供比较:http://imgur.com/LcHhljq

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

that._arrow.off();

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

我确定我在为下拉菜单创建隔离范围时做错了什么，但这是我想要走的路。任何明显值得注意但我没有做清理的事情都会很棒。

Answer 1

我们在剑道 UI 小部件和内存泄漏方面遇到了类似的问题。我们的案例与路由特别相关。当新路由生成新的 HTML 时，先前路由中的任何剑道小部件都不会被清除，因此我们发生了内存泄漏。

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

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

我们执行一些额外的代码来清除先前 View 中的 HTML，使用:

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

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

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