AngularJS：未捕获的错误：[$rootScope:infdig]答案

【问题标题】：AngularJS: Uncaught Error: [$rootScope:infdig]AngularJS：未捕获的错误：[$rootScope:infdig]
【发布时间】：2016-12-13 19:39:24
【问题描述】：

我正在努力为每场比赛争取所有球场：

HTML 如下所示：

<div ng-repeat = "g in games">
{{g.gameName}}
<ul>
<li ng-repeat = "c in getCourts(g.id)" ng-bind = "c.courtName"></li>
</ul>
</div>

控制器是：

$scope.games = {};
    $scope.courts = {};
    //$scope.slots = {};

    $http.get(URI+"booking/allGames").then(function success(res){
        $scope.games = res.data;
        //console.log($scope.games);
    },
    function error(res){
        console.log(res.data.message);
    });

    $scope.getCourts = function(gameId){

        //courts = {};
        $http.get(URI+"booking/courts/"+gameId).then(function success(res){

            //console.log(gameId);
            console.log(res.data);
            return res.data;
            //return courts;
        },
        function error(res){
            console.log(res.data.message);
        });;
    }

当我执行这个时，我得到这个错误：

angular.min.js:6 Uncaught Error: [$rootScope:infdig]

angularJS 文档说，

当应用程序的模型变得不稳定并且每个 $digest 循环都会触发状态更改和后续的 $digest 循环。

一个常见的错误是绑定到一个生成新的函数每次调用数组。

我看到了这个答案：AngularJS use a function in a controller to return data from a service to be used in ng-repeat

但我不知道如何解决这个问题。

【问题讨论】：

我看到上面的链接中已经告诉了你问题的原因和答案
@GopinathShiva 原因我得到了，但我仍然无法修复它。
1) 您的 getCourts() 方法没有返回任何内容，并且 2) 我认为 ng-repeat 无法兑现承诺
getCourts 返回 res.data @Phil
不，它没有。您的 $http 承诺会以 res.data 解析，但调用函数 getCourts() 不会返回任何内容。你需要return $http.get(...，但是你遇到了我上面的第 2 点

标签： javascript angularjs

【解决方案1】：

我认为您唯一的选择是像这样预取所有数据...

$http.get(URI+"booking/allGames").then(res => {
    $q.all(res.data.map(game => {
        return $http.get(URI+"booking/courts/"+game.id).then(res => {
            return angular.extend(game, {courts: res.data});
        });
    })).then(games => {
        $scope.games = games;
    });
});

那么你可以只使用嵌套中继器

<div ng-repeat="g in games">
    {{g.gameName}}
    <ul>
        <li ng-repeat="c in g.courts" ng-bind="c.courtName"></li>
    </ul>
</div>

【讨论】：

【解决方案2】：

我确实推荐菲尔的答案。

这是我的替代方法

注意：我只是对数据进行硬编码以进行演示，您需要在您的情况下调用http

//html
<div ng-controller="MyCtrl">
  <div ng-repeat = "g in games">
  {{g.gameName}}
  <ul ng-init='getCourts(g.id)'>
  <li ng-repeat = "c in courts[$index]" ng-bind = "c.data"></li>
  </ul>
  </div>
</div>

//js

$scope.courts = [];
$scope.games = [
    {
    id:1,
    gameName:'A'
  },{
    id:2,
    gameName:'B'
  },{
    id:3,
    gameName:'C'
  }
];
$scope.getCourts = function(id){
   if(id==1){
     $scope.courts[0]=[{data:'first'},{data:'second'}];
   }else if(id == 2){
     $scope.courts[1]=[{data:'third'},{data:'fourth'}];
   }else{
     $scope.courts[2]=[{data:'five'},{data:'six'}];
   }
}

小提琴：http://jsfiddle.net/Lvc0u55v/8061/

【讨论】：