AngularJS如何在ng-repeat中监视这些情况? [英] How does AngularJS $watch these cases in an ng-repeat?

查看:96
本文介绍了AngularJS如何在ng-repeat中监视这些情况?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我知道AngularJS在ng-repeat上设置了一些监视.此时设置了哪种手表?

I understand that AngularJS sets up some watches on ng-repeat. What type of watch is setup at this point?

还可以有人解释在每种情况下会发生什么吗?我想知道如果我有很多物品,那么如果我用其他方式写的话,用户就不会被那些本可以淘汰的手表所困扰.

Also, can someone explain what happens in each of these scenarios? I want to know in the event that I have many items, so the user isn't being bogged down by watches that could have been eliminated had I written it some other way.

一个

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

两个

<div ng-repeat="item in items">
  <div>{{item.property | myFormatter}}</div>
</div>

三个

<div ng-repeat="item in items">
  <div>{{format(item.property)}}</div>
</div>

四个

<div ng-repeat="item in items">
  <div>{{item.something()}}</div>
</div>

推荐答案

每个ng-repeat都会在items上设置一个$ watch. (如果您查看 ng-repeat源代码,其中大部分是$ watch方法的watchExpression函数).每次运行Angular 摘要循环时,都会检查items中的每个item通过此手表功能. (请注意,在摘要循环中,可以多次调用此监视函数.)

Each ng-repeat will set up a $watch on items. (If you look at the ng-repeat source code, most of it is the watchExpression function of the $watch method). Each time an Angular digest cycle runs, each item in items will be examined by this watch function. (Note that in a digest cycle, this watch function could be called more than once).

每个{{}}设置一个$ watch.如果{{}}内有item.property之类的内容,则每个摘要周期至少对它进行一次脏检查.

Each {{}} sets up a $watch. If something like item.property is inside the {{}}s, it is dirty checked at least once per digest cycle.

如果某个函数在{{}}内,则每个摘要周期至少调用一次该函数.

If a function is inside {{}}s, then that function is called at least once per digest cycle.

我不确定x | filter,但是此小提琴似乎表明该过滤器即使x不变,每个摘要周期至少调用一次.

I'm not sure about x | filter, but this fiddle seems to indicated that the filter is called at least once every digest cycle, even if x doesn't change.

这篇关于AngularJS如何在ng-repeat中监视这些情况?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆