2014-07-07 11 views
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> 

這是一個錯誤的或預期的行爲,因爲我的疏忽?

回答

相關問題