AngularJS：内存泄漏纳克重复使用自定义对象（W /简单PLUNKR） [英] AngularJS: Memory Leak with ng-repeat using custom objects (w/simple PLUNKR)
问题描述
（简单plunkr演示这里）
(simple plunkr demo here)
有使用是NG-重复泄漏的的第二波后的遍历像这样的自定义对象的数组：
There is a leak using ng-repeat after the 2nd wave iterating over an 'array' of custom objects like this :
<div ng-repeat="d_sampleObject in mySampleObjects">
{{d_sampleObject.description}}
</div>
内存状况显示一个额外的'd_sampleObject遗留下来的，而不是取消引用。更多的细节（经由控制器和注入服务）的下方。一个简单的演示还提供plunkr链接。任何想法，并帮助大大AP preciated提前！
Memory profile reveals an extra 'd_sampleObject' left over and not de-referenced. More details (via a controller and an injected service) below. A simple demonstration also in the provided plunkr link. Any thoughts and help greatly appreciated in advance!
注意：mySampleObjects'是以下实例的数组：
NOTE: 'mySampleObjects' is an array of the following instances:
ml.MySampleObject = function (id) {
this.id = id;
this.description = 'this is object #:' + ' '+id;
}
联系方式：
我有反映了我们在AngularJS应用程序利用业务域对象的自定义对象模型。我发现，当我通过我的自定义对象到NG-重复的一个实例，参考保持它（我认为角）和内存没有释放。这发生在第二次浪潮的NG-重复（点击'刷新'），因为它迭代，再次超过其数组对象。该泄漏发生在我的档案测试（在Chrome）曝光。 这里是plunkr一个简短的例子。点击刷新按钮（或更多）看到被泄露额外的d_sampleObject对象实例（在Chrome个人资料检查）。请注意，传递到NG-重复时才使用了d_sampleObject的名字。我已经包括了正在下面进一步泄露额外的对象实例（'d_sampleObject'）的屏幕截图。为什么会出现泄漏和它如何避免？
DETAILS:
I have a custom object model that reflects the business domain objects that we utilize in our AngularJS app. I have found that when I pass an instance of one of my custom objects to ng-repeat, a reference is kept to it (I think by Angular) and memory is not freed. This happens on the second 'wave' (click on 'refresh') of the ng-repeat as it iterates, again, over its array of objects. This leak is exposed in my Profile tests (in Chrome) . Here is a short example in plunkr. Click on 'refresh' button once (or more) to see the extra 'd_sampleObject' object instance that is leaked (in Chrome Profile Inspection). Note, the 'd_sampleObject' name is only used when passed to ng-repeat. I have included screenshots of the extra object instance ('d_sampleObject') that is being leaked further below. Why is there a leak and how can it be avoided?
（请注意，我发现，如果我没有在我的对象集合（JS数组）直通迭代的对象，而是直通原始指数（'整'），没有泄漏。泄漏似乎只发生时我使用一个对象引用作为纳克重复迭代的结果）
(Note, I have found if I don't iterate over my object collection (JS array) thru an object but rather thru a primitive index ('integer'), there is no leak. The leak seems to only happen when I use an object reference as a result of ng-repeat iterations)
<!DOCTYPE html>
<html ng-app="memoryleak">
<head>
<meta charset="utf-8" />
<title>Memory Leak Test</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.min.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
<script src="dataservice.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="d_sampleObject in mySampleObjects">
{{d_sampleObject.description}}
</div>
<br>
<button ng-click="redo()">Number of refreshes: {{numRedos}}!</button>
</body>
</html>
SIMPLE APP.JS
(function(ml) {
var app = angular.module('memoryleak',['servicemodule']);
app.controller('MainCtrl', ['$scope', 'dataservice', function($scope, dataservice) {
$scope.redo = function () {
$scope.numRedos++;
$scope.mySampleObjects = dataservice.myObjectCollection;
dataservice.redo();
}
$scope.redo();
}]);
}(window.MEMLEAK = window.MEMLEAK || {}));
SIMPLE dataservice.js
(function(ml) {
'use strict';
var serviceModule = angular.module('servicemodule',[]);
serviceModule.factory('dataservice', ['$rootScope', '$http',
function ($rootScope, $http) {
this.myObjectCollection = [];
this.redo = function () {
this.numRedos++;
// that.myObjectCollection = [];
this.myObjectCollection.length = 0;
for (var i = 0; i < 10; i++) {
var sampleObject = new ml.MySampleObject(i);
that.myObjectCollection.push(sampleObject);
}
sampleObject=null;
}
ml.MySampleObject = function (id) {
this.id = id;
this.description = 'this is object #:' + ' '+id;
}
return this; //return the entire service to make methods accessible to dependents
}]);
}(window.MEMLEAK = window.MEMLEAK || {}));
截图1：（第一页面加载 - 有10个'mySampleObjects'创建）
截图2：（点击刷新 - 有/创建11 mySampleObject一起传递给NG-重复d_sampleObject的实例名称的引用泄漏。）
SCREENSHOT 1: (FIRST PAGE LOAD--there are 10 'mySampleObjects' created) SCREENSHOT 2: (CLICKED ON REFRESH--there is an 11th mySampleObject created/leaked with a reference to the instance name of 'd_sampleObject' passed to ng-repeat.)
推荐答案
有
There is acknowledgement by the AngularJS folks that this is indeed a bug in the framework. A fix and pull request has been posted.
我也问时间表是什么正式的补丁。
I have also asked what the timeframe is for a formal fix.
这篇关于AngularJS：内存泄漏纳克重复使用自定义对象（W /简单PLUNKR）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
