AngularJS:为什么ng-bind在角度上优于{{}}？

Question

我在其中一个有角度的演示文稿中,提到的会议中的一个人ng-bind比{{}}绑定更好.

其中一个原因是,ng-bind将变量放在监视列表中,并且只有在模型更改时才{{}}会将数据推送到视图,另一方面,每次都会插入表达式(我猜这是角度循环)并推动值,即使值发生变化.

另外据说,如果您在屏幕上没有太多数据可以使用{{}},并且性能问题将不可见.有人可以为我解释这个问题吗？

Answer 1

能见度:

虽然您的angularjs是自举的,但用户可能会在html中看到您放置的括号.这可以用来处理ng-cloak.但对我来说,这是一种解决方法,如果我使用,我不需要使用ng-bind.

性能:

该{{}}是慢得多.

这ng-bind是一个指令,将把一个观察者放在传递的变量上.因此,ng-bind只有当传递的值确实发生变化时,才会适用.

在另一方面括号将脏检查,并刷新在每一个 $digest,即使是没有必要的.

我目前正在构建一个大的单页应用程序(每个视图约500个绑定).从{{}}更改为严格ng-bind确实为我们节省了大约20%scope.$digest.

建议:

如果使用诸如angular-translate之类的转换模块,则始终优先使用括号注释之前的指令.

{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>

如果你需要一个过滤功能,最好选择一个指令,实际上只使用你的自定义过滤器. $ filter服务的文档

更新2014年11月28日(但可能不在话题):

在Angular 1.3x bindonce中引入了功能.因此,您可以绑定表达式/属性的值一次(将在!='undefined'时绑定).

当您不希望绑定发生变化时,这非常有用.

用法:::装订前放置:

<ul>  
  <li ng-repeat="item in ::items">{{item}}</li>
</ul>  
<a-directive name="::item">
<span data-ng-bind="::value"></span>

例:

ng-repeat输出表中的一些数据,每行有多个绑定.翻译绑定,过滤输出,在每个范围摘要中执行.

Answer 2

如果您不使用ng-bind,请改为:

<div>
  Hello, {{user.name}}
</div>

您可能会Hello, {{user.name}}在user.name解决之前看到实际的一秒(在加载数据之前)

你可以这样做

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

如果这对你来说是一个问题.

另一种解决方案是使用ng-cloak.

Answer 3

ng-bind 比...更好 {{...}}

例如,您可以这样做:

<div>
  Hello, {{variable}}
</div>

这意味着,整个文本Hello, {{variable}}由封闭<div>将被复制,并存储在内存中.

如果你做了这样的事情:

<div>
  Hello, <span ng-bind="variable"></span>
</div>

只有值的值将存储在内存中,而angular将注册一个仅由变量组成的观察者(监视表达式).

Answer 4

基本上,双卷曲语法更自然可读,并且需要更少的输入.

这两种情况都会产生相同的输出但是..如果您选择使用{{}},则有可能用户{{}}在模板呈现角度之前会看到几毫秒.所以,如果你注意到任何东西,{{}}那么最好使用ng-bind.

同样非常重要的是,只有在您的角度应用程序的index.html中,您才可以取消渲染{{}}.如果您正在使用指令,那么模板,则没有机会看到它,因为angular首先渲染模板并将其附加到DOM之后.

Answer 5

{{...}}是指双向数据绑定。但是，ng-bind实际上是用于单向数据绑定的。

使用ng-bind将减少您页面中观察者的数量。因此ng-bind将比快{{...}}。因此，如果您只想显示一个值及其更新，并且不想将其更改从UI反映回控制器，那么请使用ng-bind。这将提高页面性能并减少页面加载时间。

<div>
  Hello, <span ng-bind="variable"></span>
</div>