30

我读过一些文章说如果有超过 2000 个项目,ng-repeat 会导致性能不佳,因为有太多的双向绑定可以观看。我是 angularjs 新手,无法理解 ng-repeat 和双向绑定之间的关系:

  1. ng-repeat(如输出 json 对象列表)是否一定会创建双向绑定?

  2. 有没有一种简单的方法来做 ng-repeat 只使用一种方式绑定?(最好不需要外部模块)

4

4 回答 4

58

就像提到的 user1843640 一样,如果您使用的是 Angular 1.3,则可以使用一次性绑定,但为了清楚起见,您需要将 :: 放在所有绑定上,而不仅仅是转发器。文档说这样做:

<div ng-repeat="item in ::items">{{item.name}}</div>

但是,如果我算上观察者,这只删除了一个。要真正减少双向绑定的数量,请将 :: 放在转发器内的绑定上,如下所示:

<div ng-repeat="item in ::items">{{::item.name}}</div>

这里有两个显示观察者数量的 plunker:

仅限所有绑定
中继器

感谢 Miraage 提供了统计观察者的功能https://stackoverflow.com/a/23470578/2200446

于 2015-02-05T21:09:26.293 回答
17

对于使用或升级到 Angular 1.3 的任何人,您现在可以使用“一次性绑定”。对于 ng-repeat,它看起来像这样:

<div ng-repeat="item in ::items">{{item.name}}</div>

注意::items语法。

有关更多信息,请查看Angular 文档中的表达式

于 2014-11-14T22:11:04.193 回答
3

这篇博文介绍了一些有趣的解决方案。最终结果是:

升级到 AngularJS 1.1.5 并使用limitTo无限滚动。AngularJS ng-repeat 从 1.1.4 版本开始提供 limitTo 选项。我稍微调整了 Infinite Scroll 指令,以使在不具有 100% 窗口高度的容器内滚动成为可能。

基本上,您限制了最初渲染的对象数量,然后使用无限滚动指令根据需要渲染更多对象。由于您不需要外部模块,只需根据需要使用您自己的脚本模拟无限滚动功能。

注意:这应该可以解决您的性能问题,但不会删除双向绑定。

于 2013-11-05T19:47:08.513 回答
2
  1. ng-model 生成的内容将在数据(模型)上有一个观察者,如果它超过 200 个观察者,这会降低页面性能。

  2. 请参阅此以获取一种方式绑定http://blog.scalyr.com/2013/10/31/angularjs-1200ms-to-35ms/但请确保正确使用它

希望能帮助到你!!!

于 2014-04-30T11:20:20.447 回答