Question

以下AngularJS代码中出现错误。

test01.js

var MyApp = angular.module('moduleName', []);
MyApp.controller('NameCtrl', ['$scope', function ($scope) {
    $scope.list = function() {

        return {"1": {id: 1, name: "aaa"},
                "2": {id: 2, name: "bbb"},
                "3": {id: 3, name: "ccc"}};
    }
}]);

test01.html

<div class="container">
    <div class="jumbotron">
        <h2>test01!</h2>
    </div>
    <div ng-controller="NameCtrl">
        <table class="table table-striped">
            <tr ng-repeat="list in list()">
                <td ng-repeat="nake in list">{{nake.id}}</td>
            </tr>
        </table>
    </div>
</div>

错误

Error: [$rootScope:infdig] http://errors.angularjs.org/1.3.1/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3A…Breturn%20z(e)%3Ff%3Ae%7D%3B%20newVal%3A%2034%3B%20oldVal%3A%2031%22%5D%5D
Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.3.1/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3A…Breturn%20z(e)%3Ff%3Ae%7D%3B%20newVal%3A%2034%3B%20oldVal%3A%2031%22%5D%5D angular.js:14078

或者数组的嵌套错误？原因不明。

Answer 1

我认为使用ngRepeat中的函数会使angularjs为它找到的每个元素调用它，使它进入无限循环。

您可以执行以下操作：

<table class="table table-striped" ng-init="list = list()">
    <tr ng-repeat="element in list">

所以它会起作用。还有另一个问题。 list（）函数返回一个对象，而不是一个数组。此外，第二个ngRepeat不会破坏代码，但没有用，因为没有任何嵌套数组。这是一个工作小提琴： http://jsfiddle.net/5sek867y/2/

Answer 2

您最好将代码更改为：

在您的控制器中：

$scope.lists = {  // can change to array
      "1": {id: 1, name: "aaa"},
      "2": {id: 2, name: "bbb"},
      "3": {id: 3, name: "ccc"}
};

在你的HTML中：

<div class="container">
    <div class="jumbotron">
        <h2>test01!</h2>
    </div>
    <div ng-controller="NameCtrl">
        <table class="table table-striped">
            <tr ng-repeat="list in lists">
                <td ng-repeat="nake in list">{{nake.id}}</td>
            </tr>
        </table>
    </div>
</div>

因为每次使用ng-repeat渲染元素时，都会调用list（）。在ng-repeat指令中，它会监视你的list（）返回结果。

每次调用list（）时，它都会返回一个新对象。

然后这会触发ng-repeat watchCollection来调用监听器。然后调用$ digest太多次，抛出错误。

Here is ngRepeat watchCollection source code.'rhs'是您要重复的数据。

建议您使用chrome调试工具自行查找ngRepeat内部发生的情况。这可以让你理解角度。：）

AngularJS错误：$ rootScope：infdig

2 个答案:

每次调用list（）时，它都会返回一个新对象。