I am using Angular (1.1.5) as the front end for an ASP.Net MVC3 project and am having problems with memory consumption in the browser when using ng-repeat.
It looks as though when the route changes and the ng-view tag is updated, the old dom elements are not garbage collected when ng-repeat is used.
Setup is as follows:
- _layout.cshtml page with
<html ng-app="MyApp">, scripts, css and the header with a link to the angular app - index.cshtml partial using the layout page and contains a single
<ng-view></ng-view>tag index.html containing my content with the ng-repeat
index.html:
<div ng-controller="MyCtrl"> <div ng-repeat="item in items"> <p>Blah Foo Bar lorem ipsum gack</p> <hr /> </div> </div>app.js containing the main app module, with routing config and controller
app.js
var app = angular.module('MyApp', ['MyApp.content'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.otherwise({ templateUrl: '/index.html' });
}]);
angular.module('MyApp.content', []);
angular.module('MyApp.content')
.controller("MyCtrl", ['$scope', function ($scope) {
$scope.items = [{}, {}];
}]);
So clicking on the link in the header (which always produces a route change as no specific routes are defined) repeatedly and then calling the garbage collector produces the following in chrome timeline:
As you can see the memory baseline does not return to the initial and this continues to increase the more route changes are made. Also the dom element count continues to increase. Looking at a heap snapshot, these are detached but still hanging around.
Removing the ng-repeat results in the dom count reseting each route change.
Anyone know why? How to prevent these elements from hanging around?
Update: I created a new MVC3 project in VS2010 and didn't have the issue. Created a new MVC3 project in VS2012 and did. :/
