0
我遇到了一個我一直在工作的Angular應用程序的問題。它顯示數據行並在每列中使用ng-if指令來控制前綴和其他描述性文本或圖像。當數據發生變化時,Ang-ng-if指令不斷消耗更多內存
它工作的很好,除了內存使用量繼續增長並且相當快,這取決於我顯示的數據量和更改的速度。
我寫了一篇文章來證明這個問題。我在Chrome開發工具中使用timeline memory view來查看內存使用情況。如果您取出ng-if指令,每次GC後內存將恢復正常。
http://plnkr.co/edit/Wcl9eJWy1AXqcNr8rpf1
HTML:
<body ng-app="MyApp">
<div ng-controller="RepoCtrl">
<div class="row">
<div class="col-md-12">
<table class="table table-condensed table-striped table-bordered table-responsive">
<tr>
<th>Repo</th>
<th>Owner</th>
<th>Git URL</th>
<th>Description</th>
</tr>
<tr ng-repeat="repo in repos">
<td>
<p ng-if="repo.name">{{ repo.name }}</p>
<td>
<p ng-if="repo.owner.login">{{ repo.owner.login }}</p>
</td>
<td>
<p ng-if="repo.git_url">{{ repo.git_url }}</p>
</td>
<td>
<p ng-if="repo.description">{{ repo.description }}</p>
</td>
</tr>
</table>
</div>
</div>
</div>
的JavaScript:
<script type="application/javascript">
var app = angular.module("MyApp", ['ngResource']);
app.factory('RepoFactory', ['$resource', function ($resource) {
console.log('updated data');
return $resource(':user.json', {}, {
query: { method: 'GET', params: {}, isArray: true }
});
}]);
app.controller("RepoCtrl", ['$scope', '$http', '$interval', 'RepoFactory', function ($scope, $http, $interval, RepoFactory) {
function poll() {
if (typeof $scope.last === 'undefined') {
$scope.last = 'vye';
console.log('no previous query, using vye')
} else if ($scope.last == 'vye') {
$scope.last = 'angular';
console.log('got repos for vye last time, using angular')
} else if ($scope.last == 'angular') {
$scope.last = 'vye';
console.log('got repos for angular last time, using vye')
}
RepoFactory.query({user: $scope.last}, function(data){
$scope.repos = data;
});
}
var promise = $interval(poll, 5000);
$scope.$on('$destroy', function() {
if (angular.isDefined(promise)) {
$interval.cancel(promise);
promise = undefined;
}
});
}]);
</script>
這是一個錯誤的或預期的行爲,因爲我的疏忽?