AngularJS - 错误：[$rootscope:infdig] 10 $digest() 迭代达到

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

问题与在绑定中使用函数有关（插值 {{}}）。由于其性质，angularjs 不断观察 $scope（视图模型）的变化。因此，如果您不小心，您可能会绑定到始终返回对象的新/不同实例的函数。这会触发一个无限循环，角度将其识别为错误并禁用绑定以避免堆栈溢出。如果说您更改了函数以将返回的客户存储到本地变量中，则可以避免该问题。

这是一个完整的sn-p。

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>