This was a problem with AngularJS. They will be pushing out a fix. On Tuesday, February 24, 2015 at 9:31:11 AM UTC-5, Mo Moadeli wrote: > > (simple plunkr demo here <http://plnkr.co/edit/1Adh2P65ZS8YHYJZhLMk>) > *SUMMARY:* > > 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> > > 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! > > *NOTE:* 'mySampleObjects' is an array of the following instances: > > ml.MySampleObject = function (id) { > > this.id = id; > this.description = 'this is object #:' + ' '+id; > } > > *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 <http://plnkr.co/edit/1Adh2P65ZS8YHYJZhLMk> 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 > Inpsection). 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? > > (Note, I have found if I don't iterate over my object collection (JS > array) thru an object but rather thru an 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) > *SIMPLE HTML:* > > <!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="[email protected]" > 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 = []; > > var that = this; > > this.redo = function () { > > that.numRedos++; > > // that.myObjectCollection = []; > that.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 || {})); > > SCREENSHOT 1: (FIRST PAGE LOAD--there are 10 'mySampleObjects' created) > [image: > 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.) > [image: > (CLICKED ON REFRESH--there is an 11th mySampleObject created/leaked with a > reference to the instance name of 'd_sampleObject' passed to ng-repeat.)] >
-- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
