Question

我试图在AngularJS中创建一个内存泄漏示例。我使用ChromeDev工具，但似乎很难找到。这是我的演示之一：

.directive('myDirectiveLeak', function () {
    return {
      replace: 'AE',
      template:'<div><input type = "text"></div>',
      link: function(scope,element){
        element.bind('click',function(e){
          element.datepicker(); /// I add a JQuery plugin
        });
      }
    };

有些网站显示此代码会导致内存泄漏。在强制GC之后，我仍然没有看到任何内存泄漏。我认为作为Google产品的AngularJS已经做了一些事情来避免内存泄漏。你能给我一个AngularJS的典型例子吗？谢谢！

Answer 1

如果在定期更换条目的ngRepeat中使用此伪指令，您会注意到内存泄漏。它是由绑定到“click”事件引起的。您必须在销毁指令时取消绑定此事件：

.directive('myDirectiveLeak', function () {
    return {
      replace: 'AE',
      template:'<div><input type = "text"></div>',
      link: function(scope,element){
        var clicked = function(e){
          element.datepicker(); /// I add a JQuery plugin
        };
        element.bind('click', clicked);
        scope.$on('$destroy', function() {
          element.unbind('click', clicked);
        });
      }
    };

原因是因为附加事件，你的指令会留在内存中，虽然它已经在ngRepeat中删除了，每次更改列表时都会重新创建DOM。'

PS：您可以使用'track by'来跟踪ngRepeat指令中的更改。有关详细信息，请查看documentation。

如何在AngularJS中创建内存泄漏

1 个答案: