AngularJS InfDig错误（无限循环）与NG-循环功能，返回对象的数组 [英] AngularJS InfDig error (infinite loop) with ng-repeat function that returns array of objects

问题描述

下面是我的code：

 ＆LT; H1 NG重复=＆GT在FUNC（）项;东西＆LT; / H1＆GT;$ scope.func =功能（）{
  返回[{属性：值1}，{属性：值2}];
}
 

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

v.1.1.1的小提琴

v.1.2.1的小提琴

难道你解释这种情况呢？非常感谢。

解决方案

  

截至AngularJS 1.2：加入的轨道的前pression到NG-重复和更适当的证明解决此问题
  在以下code。

 ＆LT; H1 NG重复=在FUNC项目（）通过跟踪指数$＆GT;＆东西LT; / H1＆GT;$ scope.func =功能（）{
  返回[{属性：值1}，{属性：值2}];
}
 

  
  

下面的文章有助于了解更详细的前pression，为什么它是非常有用，特别是$$ haskey的使用履带与ngRepeat在AngularJS 1.2本纳达尔。

问题是，你每次都创建一个新的数组，所以它的新的东西，角度需要跟踪。据我所知， NG-重复运行，然后立即再次检查其收藏是否有任何在该周期的变化。由于该函数返回一个新的数组，这被认为是一个改变。

检查了这一点： http://jsfiddle.net/kL5YZ/ 。
如果您在的console.log 查找并点击按钮，你会看到的在 $$ hashKey 属性对象正在发生变化，每次NG重复运行。

在发生变化开始于1.1.4版本，但更改日志不给任何线索，为什么行为是不同的。新的行为确实让我更有意义。

下面是一个伟大的职位，我发现解释了深入的当前行为：<一href=\"http://stackoverflow.com/questions/12336897/how-to-loop-through-items-returned-by-a-function-with-ng-repeat\">How遍历由函数与NG-重复返回的项目？

如果你一定要每次都返回相同的对象/数组，你不会有错误。你可以有功能缓存任何它创建一个基于参数和总是返回相同的数组/对象时，这些参数的传递。所以，myFunc的（'富'）将始终返回相同的数组，而不是一个新的，看起来相同。看到我下面code中的注意事项。 现场演示（点击进入）。

 ＆LT; D​​IV NG重复=富在FOOS＆GT;
  ＆LT; D​​IV NG重复=在barFunc（富）栏＆GT; {{bar.text}}＆LT; / DIV＆GT;
  ＆LT; D​​IV NG重复=酒吧barFunc（'测试'）＆GT; {{bar.text}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

JavaScript的：

  VAR应用= angular.module（'对myApp'，[]）;app.controller（'myCtrl'，函数（$范围，为myService）{
  $ scope.foos = [
    '一'，'B'，'c'的
  ];
  //我投入服务，是为了避免混乱控制器
  $ scope.barFunc = myService.getObj;
}）;app.factory（'为myService'，函数（）{
  / *
   *创建任何事情都会被保存在这个缓存对象，
   *基于传递给`getObj`的参数。
   *如果您需要多个参数，你可以它们形成一个字符串，
   *并使用它作为缓存键
   *因为只有一个参数在这里，我将只使用
   * /
  VAR缓存= {};  VAR为myService = {
    getObj：功能（VAL）{
      //如果我们没有创建这个参数之前的数组
      如果（！缓存[VAL]）{
        //创建一个，并将其与该参数的关键存储在缓存
        缓存[VAL] = [
          {文字：VAL}
        ];
      }
      //返回缓存阵列
      返回高速缓存[VAL]
    }
  };  返回为myService;
}）;
 

Here's my code:

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

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

In Angular.js v. 1.1.1 there's no mistake. In Angular.JS v 1.2.1 I get an infDig mistake.

Fiddle of v.1.1.1

Fiddle of v.1.2.1

Could you explain this situation? Thanks a lot.

解决方案

As of AngularJS 1.2: The "track by" expression was added to ng-repeat and more appropriately addresses this issue as demonstrated in the following code.

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

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

The following article helps understand the expression in more detail and why it is so useful, particularly when dealing with $$haskey Using Track-By With ngRepeat In AngularJS 1.2 by Ben Nadal.

The problem is that you're creating a new array each time, so it's something new that angular needs to track. As far as I can tell, ng-repeat runs, then immediately checks its collection again to see if anything changed in that cycle. Because the function returns a new array, that is perceived as a change.

Check this out: http://jsfiddle.net/kL5YZ/. If you look in the console.log and click the button, you will see that the $$hashKey property of the objects is being changed each time ng-repeat runs.

The change occurs starting at version 1.1.4, but the changelog doesn't give any clues as to why the behavior is different. The new behavior does make more sense to me.

Here's a great post I found explaining the current behavior in depth: How to Loop through items returned by a function with ng-repeat?

If you make sure to return the same object/array each time, you won't have the error. You could have the function cache anything it creates based on the arguments and always return the same array/object when those arguments are passed in. So, myFunc('foo') will always return the same array, not a new one that looks the same. See the notes in my code below. Live demo (click).

<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;
});

这篇关于AngularJS InfDig错误（无限循环）与NG-循环功能，返回对象的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！