angularjs - 带有返回对象数组的ng-repeat函数的AngularJS InfDig错误（无限循环）

Question

这是我的代码：

<h1 ng-repeat="item in func()">something</h1>

$scope.func = function(){
  return [{"property" : "value1"},{"property": "value2"}];
}

在 Angular.js v. 1.1.1 中没有错误。在 Angular.JS v 1.2.1 中，我得到一个 infDig 错误。

v.1.1.1 的小提琴

v.1.2.1 的小提琴

你能解释一下这种情况吗？非常感谢。

Answer 1

从 AngularJS 1.2 开始： “track by”表达式被添加到 ng-repeat，更恰当地解决了这个问题，如下面的代码所示。

<h1 ng-repeat="item in func() track by $index">something</h1>

$scope.func = function(){
  return [{"property" : "value1"},{"property": "value2"}];
}

以下文章有助于更详细地理解该表达式以及它为何如此有用，尤其是在Ben Nadal 在 AngularJS 1.2 中使用 Track-By With ngRepeat处理 $$haskey 时。

问题是您每次都在创建一个新数组，因此角度需要跟踪它是新的东西。据我所知，ng-repeat运行，然后立即再次检查它的集合，看看在那个循环中是否有任何变化。因为该函数返回一个新数组，所以这被视为更改。

看看这个：http: //jsfiddle.net/kL5YZ/。 如果您查看console.log并单击按钮，您将看到$$hashKey每次运行 ng-repeat 时对象的属性都在更改。

更改从版本 1.1.4 开始，但更改日志没有提供任何关于行为不同的线索。新行为对我来说确实更有意义。

这是我发现的一篇很好的文章，深入解释了当前的行为：如何循环通过带有 ng-repeat 的函数返回的项目？

如果您确保每次都返回相同的对象/数组，则不会出现错误。您可以让函数缓存它根据参数创建的任何内容，并在传入这些参数时始终返回相同的数组/对象。因此， myFunc('foo') 将始终返回相同的数组，而不是看起来像相同的。请参阅下面我的代码中的注释。现场演示（点击）。

<div ng-repeat="foo in foos">
  <div ng-repeat="bar in barFunc(foo)">{{bar.text}}</div>
  <div ng-repeat="bar in barFunc('test')">{{bar.text}}</div>
</div>

JavaScript：

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

app.controller('myCtrl', function($scope, myService) {
  $scope.foos = [
    'a','b','c'
  ];
  //I put this into a service to avoid cluttering the controller
  $scope.barFunc = myService.getObj;
});

app.factory('myService', function() {
  /*
   * anything created will be stored in this cache object,
   * based on the arguments passed to `getObj`.
   * If you need multiple arguments, you could form them into a string,
   * and use that as the cache key
   * since there's only one argument here, I'll just use that
   */
  var cache = {};

  var myService = {
    getObj : function(val) {
      //if we haven't created an array with this argument before
      if (!cache[val]) {
        //create one and store it in the cache with that argument as the key
        cache[val] = [
          {text:val}
        ];
      }
      //return the cached array
      return cache[val];
    }
  };

  return myService;
});