Question

我正在使用AnuglarJS 1.4.8。我想用ng-repeat提供数据。

我有以下问题，我没有更多的想法来解决它。我试过AnuglarJS的解决方案，但我不起作用。

请有人帮助我。

错误：[$ rootScope：infdig] 10 $ digest（）迭代达成。中止！

观察者在最近5次迭代中被解雇：[]

http://errors.angularjs.org/1.4.8/ $ rootScope / infdig P0 = 10安培; P1 =％5B％5D

服务：

ReadToEnd

控制器：

.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);
      });      
    };   
});

HTML：

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)
         });
       }
    }
 };

Answer 1

你错过了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>

Answer 2

试试。

服务：

.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>

您还应该知道，每次使用新数组进行迭代时都不应该返回。否则，角度将继续调用该函数来检索＆＃34;稳定＆＃34;数组的值。

Answer 3

您在运行异步查询时在javascript中犯了一个常见错误。模式如下：

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

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

同样，在您的示例中getAll实际上并未返回任何内容;它只是调用异步方法。这个异步方法调用$ http，它触发一个摘要循环，这将导致再次调用getAll，依此类推。要感谢angular可以检测到这个问题。

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

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 4

您是否尝试过单独的函数从数据库中获取实体，然后将这些数据放入变量中，然后将其传递给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>

ng-repeat，$ scope，$ http的问题

4 个答案: