Question

我创建了一个列表模块，可以显示多个项目页面。我正在使用嵌套的ng-repeat来遍历页面和每个页面上的项目。但是，我注意到，当我不断刷新列表并加载新页面和项目时，Chrome节点中的DOM节点不断增加，内存使用率也在增加（我确保在录制过程中点击了垃圾收集按钮，所以必须是泄漏的东西）：

我正在使用angular 1.5.5和requireJS，我听说ng-repeat曾经有过内存泄漏，但已经在1.4.x中修复了。代码很简单，我没有在代码中注册任何DOM处理程序，我一直在讨论这个问题一个星期仍然无法弄清楚原因，我现在非常绝望，非常感谢帮助。

我的代码文件结构如下：

list-container
     |___module.js
     |
     |___controllers
     |       |____list-container.js
     |
     |___directives
     |       |____list-container.js
     |
     |___views
           |____directive-list-container.html

以下是代码：

module.js

define([
  'angular',
], function (angular) {
  'use strict';

  return angular.module('ui.listContainer', []);
});

列表container.js（指令）

define([
  'angular',
  '../module',
  '../controllers/list-container'
], function (angular, module) {
  'use strict';


  return angular
    .module('ui.listContainer')
    .directive('listContainer', function () {
    return {
      replace: true,
      restrict: 'E',
      templateUrl: '/modules/list-container/views/directive-list-container.html',
      bindToController: {},
      scope: {},
      controllerAs: 'listVm',
      controller: 'listContainerController'
    };
  });
});

列表container.js（控制器）

define([
   'angular',
   '../module'
 ], function (angular, module) {
   'use strict';
   angular.module('ui.listContainer').controller('listContainerController', ['$scope', function ($scope) {

     var listVm = this;

     $scope.refreshPage = function () {
       if (listVm.list) {
         listVm.list = null; //Clear the data
       }
       listVm.list = {};
       listVm.list.pages = feedData(); //Load mock data
     };


     function feedData() {
       var pages = [];
       for(var i = 0; i < 10; i++) {
         pages.push(new PageMock());
       }
       return pages;
     }

     function PageMock() {
       this.items = [];
       for (var i = 0; i < 50; i++) {
         this.items.push(new ItemMock());
       }
     }

     function ItemMock() {
       this.id = Math.floor(Math.random() * 10000000);
     }

   }]);
 });

指令一览container.html（视图）

<div class="list-container row">
    <div id="list-container-pages">
        <div class="list-container-pages row">
            <div ng-click="refreshPage()">Refresh Page</div>
            <div class="list-container-page row" ng-repeat="page in listVm.list.pages track by $index">
                <div class="row" ng-repeat="listItem in page.items track by listItem.id">
                    <span class="col-md-12">{{listItem.id}}</span>
                </div>
            </div>
        </div>
    </div>
</div>

我创建了一个模仿上面代码的plunker，但是在plunker示例中它根本没有泄漏，这是非常奇怪的。 Plunker Example

Answer 1

看起来好像有角度的虫子，请看另一篇文章。 AngularJS: Memory Leak with ng-repeat using custom objects (w/simple PLUNKR)

angular 1.5.x ngRepeat内存泄漏

1 个答案: