javascript - AngularJS: Uncaught Error :[$rootScope:infdig]

Question

我正在尝试获取每场比赛的所有 field :

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>

Controller 是:

$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 文档说，

This error occurs when the application's model becomes unstable and each $digest cycle triggers a state change and subsequent $digest cycle.

One common mistake is binding to a function which generates a new array every time it is called.

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

但我不确定如何解决这个问题。

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