AngularJs 内存泄漏 : scope $$watchers increase even if the watched elements are removed

Question

我的 AngularJs 应用程序有一个大问题...

我从服务器加载 HTML 内容(自定义表单)。
当然，加载的 HTML 包含一些 ng-show , ng-click等等...
所以，我在追加到我的页面之前 $compile 它。
这很好用。

但是，每次我 $compile加载的 HTML，它添加了更多 $$watchers在我的范围内(当然是 ng-show 观察者)。

这里有一个小演示/模拟:http://plnkr.co/edit/6sSazsFAugzE5XmcYkS7

我的问题:那个$$watchers如果您在“加载一些”上单击数百次，则永远不会减少并导致内存泄漏。

我试过 remove() , empty() , unbind()我的元素(链接)但 $$watchers 数组一直在增长并且永远不会被清理。

我该如何解决这个问题？如何清理无用的 $$watchers 或“反编译”？

谢谢你的帮助 !!!

Answer 1

由于新元素是从相同的范围和相同的元素编译的，因此永远不会删除观察者。

当它们的作用域被销毁( scope.$destroy() )时，所有观察者都会被移除，这会在元素被移除时自动发生。然而你的元素永远不会被删除，你会不断用新节点替换它的 HTML。

避免这种情况的一种干净方法是避免重新编译每个新链接，而是生成动态 ng-repeat列表。

否则，如果你想保留你的代码，你可以在每次编译时为你的元素创建一个新的作用域。这样，在重新编译它时，先前的作用域将被销毁并移除其所有观察者。

你可以在这里看到它的实际效果。我所做的就是更换 scope来自 scope.$new()在 compile 调用中，以便每次都为元素设置一个新的范围:

http://plnkr.co/edit/PvUAYyb0IUoaT3dVmpGM?p=preview

PS:这是一个我从未遇到过的有趣用例，它可以为 Angular 社区做出贡献:-)