在AngularJS中使用ng-repeat时程序员应该注意哪些主要问题?

时间:2014-09-10 07:59:16

标签: angularjs angularjs-directive angularjs-ng-repeat

我正在编写新指令,该指令将使用 ng-repeat 来创建嵌套的子级等等。到目前为止我所看到的是使用这个伟大的角度工具有各种各样的问题。您可以很好地绑定数据,但是当数据增加时,您将面临非常低的性能和难以解决的缺陷。这使得all指令很难维护和重用。

所以我想问一下你们对AngularJS有很多经验的人,为了正确使用它而不是犯很大的错误,你应该注意哪些是最好的事情。

你有没有想过不使用它而只是制作自己的循环? 很高兴听到你的观点。

1 个答案:

答案 0 :(得分:1)

让我们快速回顾一下我们如何使用ng-repeats(以及可选的过滤器):

<div ng-repeat="stock in ctrl.stocks | filter:someCondition">

</div>

我们也可以使用ng-repeats迭代对象(如果你不知道这个):

<div ng-repeat="(key, stock) in ctrl.stocksMap | filter:someOtherCondition">

</div>

其中stocksMap是一个对象图,其中键是股票的id,值是单个股票对象。现在一个常见的误解是AngularJS如何基于此ng-repeat创建和显示UI。当您使用ng-repeat时,这就是AngularJS的工作原理(简而言之):

  1. 迭代数组中的每个项目(或每个键,值中的值) 对象)
  2. 它通过我们的任何过滤器运行每个项目 表达式,检查是否应该显示
  3. 它计算一个哈希值,通过它来识别对象(哪个 默认为参考)
  4. 它检查它是否已经为哈希值创建了一个DOM元素 以前如果是这样,它会重复使用它
  5. 如果没有,它会根据ng-repeat模板

  6. 创建一个DOM元素
  7. 采取所有DOM操作并以最佳方式插入     进入实际DOM的方式

  8. 在阵列上添加了一个监视,如果是,则会再次触发步骤1 阵列经历任何变化

  9. 有关详细信息,请参阅此LINK