AngularJS - 错误 : [$rootscope:infdig] 10 $digest() iterations reached

Question

我是 AngularJS 的新手，遇到了一个问题。

我有一个通过 $http GET 请求检索到的发票的 JSON 数组，该请求在此处循环:

  <a ng-repeat="invoice in invoices" href="#" class="list-group-item">
    {{ invoice[data]["TxnDate"][0] }} -
    {{ invoice[data]["DocNumber"][0] }} - 
    ${{ invoice[data]["TotalAmt"][0] }} - 
    {{ getCustomer(invoice[data]["Id"][0]) }}

    <i class="fa fa-chevron-right pull-right"></i>
    <i class="pull-right">Edit</i>
  </a>

问题是除了客户的引用号外，发票数组不存储有关客户的任何信息。

因此，我创建了一个名为 getCustomer 的函数，它通过客户的引用号在我的 API 中查询客户的姓名。

$scope.getCustomer = function(id) {

    var customer_id = id.match(/\d+/)[0];

    $http.post('/customers', customer_id).success(function(response) {
        console.log(response);
    });

};

问题是我收到这个错误:

error: [$rootscope:infdig] 10 $digest() iterations reached. aborting! watchers fired in the last 5 iterations: []

稍后，我会想出一种更有效的方法来执行此操作，但我很想知道是什么导致了此错误？

经过研究，我认为这与以下事实有关:一旦其中一个列表项中的数据发生变化，AngularJS 需要检查所有列表项。尽管如此，我还是很困惑。这样做的正确方法是什么？

Answer 1

问题与在绑定(bind)中使用函数有关(插值 {{}})。由于其性质，angularjs 会不断观察 $scope( View 模型)的变化。因此，如果您不小心，您可能会绑定(bind)到一个总是返回对象的新/不同实例的函数。这会触发一个无限循环，angular 将其识别为错误并禁用绑定(bind)以避免计算溢出。如果说您更改了函数以将返回的客户存储到局部变量，则可以避免该问题。

这是一个完整的片段。

var app = angular.module('main', []);

app.controller('MainCtrl', function($scope, $http, $q) {
  $scope.invoices = [
    { Id: "1", TxnDate: new Date(2014, 6, 26), DocNumber: "I001234", TotalAmt: 200.34 }, 
    { Id: "2", TxnDate: new Date(2014, 8, 2), DocNumber: "I000021", TotalAmt: 530.34 }, 
    { Id: "3", TxnDate: new Date(2014, 11, 15), DocNumber: "I000023", TotalAmt: 123 },  
    { Id: "4", TxnDate: new Date(2014, 12, 11), DocNumber: "I000027", TotalAmt: 5000 },  
  ];
  
  var testUrl = 'http://echo.jsontest.com/company/AKME/firstName/John/lastName/Doe';
  var _customerCache = {};
  $scope.customerCache = _customerCache;
  $scope.getCustomer = function(id) {
    var deferred = $q.defer(); // defer
    if (_customerCache[id])
        return deferred.resolve(_customerCache[id]);
    
    var customer_id = id.match(/\d+/)[0]; 

    $http.get(testUrl + customer_id + '/id/'+ customer_id).success(function(response) {
        console.log(response);
        _customerCache[id] = response;
        deferred.resolve(response);
    });
    return deferred.promise;
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div  ng-app="main"  ng-controller="MainCtrl">
  <ul>
    <li ng-repeat="invoice in invoices" ng-init="getCustomer(invoice.Id)">
    <a href="#" class="list-group-item">
      {{ invoice.TxnDate | date }} -
      {{ invoice.DocNumber }} - 
      {{ invoice.TotalAmt | currency }}
      {{ customerCache[invoice.Id].firstName }} {{ customerCache[invoice.Id].lastName }}
    </a>
    </li>
  </ul>
  <span>customers via http</span>
  <ul>
    <li ng-repeat="cust in customerCache">
      {{cust}}
    </li>
  </ul>
<div>