官方 AngularJS UI Bootstrap $modal 示例中的内存泄漏？

Posted 2023-02-19

【中文标题】官方 AngularJS UI Bootstrap $modal 示例中的内存泄漏？

【英文标题】：Memory Leak in official AngularJS UI Bootstrap $modal sample?

【发布时间】：2014-12-12 09:27:56

【问题描述】：

我试图了解如何避免 AngularJS 中的内存泄漏。似乎几乎没有关于要清理什么的文档，正如人们所期望的那样，如果垃圾收集是完美且无所不知的。但是，我的阅读表明很容易留下阻止垃圾收集的绑定 DOM 元素，*** answer 说我们必须手动取消绑定在指令中设置的任何绑定，并且在较小的范围内，clean up $timeouts as well。我遇到了this article，它指示我寻找“分离的”DOM 元素。

仅使用sample $modal code from the AngularJS UI site，我在打开和关闭模式对话框后发现了许多相当大的分离元素。它似乎不会随着重复点击而增长，但如果我有很多对话框，每个对话框似乎都会永远留下它的足迹。关闭后我尝试设置modalInstance = null，但没有任何效果。

分离的元素真的很糟糕吗？如果是这样，应该如何修改AngularJS UI sample modal code 以消除这些？

更重要的是，对于使用 AngularJS 时要清理的具体内容，是否有任何简单、清晰的说明？很高兴他们提供了 $on.$destroy 函数，但我找不到任何明确的说明来说明我负责清理什么或如何清理。

【参考方案1】：

恐怕分离的元素是更复杂的问题，会导致不受控制的内存泄漏。我研究了一种为我解决这个问题的方法。那就是本机 ui.bootstrap 模态行为可以通过自定义 $modal 工厂进行更改，该工厂可以防止破坏和重新实例化对话框。所以 $modal 对话框变成了一个单例。

我已经在 github 上分享了我对该解决方案的尝试：https://github.com/dhilt/angular-bootstrap-modal-singleton。我在我从事的项目中使用它。

【讨论】：

感谢指点！我（有点）惊讶于你说这个基本的构建块有基本的内部问题。我希望那边的团队看看你的解决方案。但是，我的问题更为笼统：我正在寻找有关 AngularJS 内存泄漏保护和最佳/预期实践的总体指导。

类似于 1) 每次销毁 $scope 时手动取消绑定 $rootScope.$on 侦听器，2) 手动处理外部插件，3) 转换链接函数 transcludeFn(scope, cloneLinkingFn(clone) ）执行必须伴随克隆手动删除范围破坏（clone.remove（））等是的，拥有这样的列表会非常有帮助...... PS他们已经在ui.bootstrap 0.12中修复了他们的$modal泄漏。 0

【参考方案2】：

这是来自 angular-ui 的 bug：

这是由于我们重用了模态范围。每次范围是 重新使用并附加到不同的元素上，观察者被添加到 范围

这里是fix