ng-repeat，$ scope，$ http问题

Question

即时通讯工作与AnuglarJS 1.4.8。我想用ng-repeat给出数据。

我有以下问题，我没有更多的想法来解决它。我尝试了AnuglarJS的解决方案，但我没有工作。

有人可以帮助我。

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Watchers fired in the last 5 iterations: []

http://errors.angularjs.org/1.4.8/ $rootScope/infdig?p0=10&p1=%5B%5D

服务：

.service('database', function ($http) { 
    self = this; 
    this.url = 'http://localhost:3001'; 
    this.getPersons = function(cb){ 
     return $http({ 
     method: 'GET', 
     url: self.url + '/loadperson' 
     }).success(function (data) { 
     cb(data); 
     });  
    }; 
}); 

控制器：

angular.module('myApp') 
.controller('personCtrl', function ($scope, database) { 
    $scope.people = function(){ 
     return{ 
     getAll: function() { 
      database.getPersons(function (data) { 
      return data; 
      // should return a Object(id, name) 
     }); 
     } 
    } 
}; 

HTML：

<div ng-repeat="people in people().getAll()"> 
    <p>{{people.name}}</p> 
</div> 

Answer 1

尝试。

服务：

.service('database', function ($http) { 
    self = this; 
    this.url = 'http://localhost:3001'; 
    this.getPersons = function(){ 
     return $http({ 
     method: 'GET', 
     url: self.url + '/loadperson' 
     });  
    }; 
}); 

控制器：

angular.module('myApp') 
.controller('personCtrl', function ($scope, database) { 
    database.getPerson().success(function(data) { 
     $scope.people = data; 
    }); 
}); 

HTML：

<div ng-repeat="person in people"> 
    <p>{{person.name}}</p> 
</div> 

你也应该知道，你不应该每次都返回一个新的数组迭代。否则，角将继续调用该函数来检索数组的“稳定”值。

Answer 2

运行异步查询时，您在JavaScript中发生了常见错误。该模式有云：

function outerFunction() { 
    invokeInnerFunction(function() { 
     return 3; 
    } 
} 

什么outerFunction()回报？错误是认为它返回3，但答案实际上是outerFunction不返回任何内容。

同样，在你的例子getAll实际上并没有返回任何东西;它只是调用一个异步方法。这个异步方法调用$ http，它触发一个摘要循环，这将导致getAll被再次调用，以此类推。感谢角度可以检测到这个问题。

您只想在启动时调用一次数据库查询，并初始化人员列表。只需将此列表存储在变量中，以便它不会在下一个摘要循环中再次查询数据库。

angular.module('myApp') 
.controller('personCtrl', function ($scope, database) { 
    $scope.allPeople = []; 
    database.getPersons(function(data) { 
     $scope.allPeople = data; 
    }); 
}; 

的然后你的HTML

<div ng-repeat="people in allPeople"> 
    <p>{{people.name}}</p> 
</div> 

简单得多。

Answer 3

您是否尝试过使用单独的函数从数据库中获取实体，然后将这些数据放入一个变量中，然后传递给ngRepeat？

控制器

angular.module('myApp') 
.controller('personCtrl', function ($scope, database) { 
    $scope.people = []; 
    $scope.getPeople = function(){ 
     return{ 
     getAll: function() { 
      database.getPersons(function (data) { 
      $scope.people = data; 
      return; 
      // should return a Object(id, name) 
     }); 
     } 
    } 
    //load the list of people 
    $scope.getPeople(); 
}; 

视图

<div ng-repeat="person in people"> 
    <p>{{person.name}}</p> 
</div> 

Answer 4

你缺少的JavaScript非阻塞方式。试试下面的，它应该工作 控制器：

angular.module('myApp') 
.controller('personCtrl', function ($scope, database) { 
    $scope.loadPeoples = function(){ 
     return{ 
     getAll: function() { 
      database.getPersons(function (data) { 
      $scope.peoples = data; 
      // should return a Object(id, name) 
     }); 
     } 
    } 
}; 
$scope.loadPeoples(); 
}) 

HTML：

<div ng-repeat="people in peoples"> 
    <p>{{people.name}}</p> 
</div>