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

我在其中一个有角度的演示文稿和 Session 中提到的人之一 ng-bind{{}} 绑定更好 .

其中一个原因, ng-bind 把变量观察名单,只有当有一个模型更改数据推送到视图中,另一方面, {{}} 每次都会插值表达式(我猜是角周期)和推送值,即使值发生了变化 .

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

回答(12)

3 years ago

如果你没有使用 ng-bind ,而是这样:

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

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

你可以这样做

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

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

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

3 years ago

Visibility:

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


Performance:

{{}}much slower .

这个 ng-bind 是一个指令,它会在传递的变量上放置一个观察者 . 所以 ng-bind 只适用于 passed value does actually change .

另一方面,括号将为 dirty checked 并在 every $digest 中刷新,即使它是 not necessary .


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


Suggestion

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

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

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


UPDATE 28.11.2014 (但可能不在话题范围内):

在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 在表中输出一些数据,每行有多个绑定 . 翻译绑定,过滤输出,在每个范围摘要中执行 .

3 years ago

ng-bind 优于 {{...}}

例如,您可以这样做:

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

这意味着 <div> 所包含的整个文本 Hello, {} 将被复制并存储在内存中 .

如果你做了这样的事情:

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

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

3 years ago

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

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

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

3 years ago

这是因为使用 {{}} 时,角度编译器会同时考虑文本节点和它的父节点,因为有可能合并2个节点 . 因此,有额外的链接器会增加加载时间 . 当然,对于一些这样的事件,差异并不重要,但是当您在大量项目的转发器中使用它时,它将在较慢的运行时环境中产生影响 .

3 years ago

{{...}} 表示双向数据绑定 . 但是, ng-bind 实际上是用于单向数据绑定 .

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

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

3 years ago

enter image description here

Ng-Bind之所以更好是因为,

什么时候您的页面未加载或当您的互联网速度较慢或您的网站加载一半时,您可以看到这些类型的问题(检查带有读取标记的屏幕截图)将在完全连线的屏幕上触发 . 为了避免这种情况,我们应该Ng-bind

3 years ago

ng-bind 也有它的问题 . 当你尝试使用angular filterslimit 或其他东西时,如果你使用 ng-bind ,你可能会遇到问题 . 但在其他情况下, ng-bindUX side更好 . 当用户打开页面时,他/她将看到(10ms-100ms)打印符号( { } ),这就是ng-bind更好的原因 .

3 years ago

{{}}中存在一些闪烁问题,例如当您刷新页面时,会看到时间表达式的短垃圾邮件 . 因此我们应该使用ng-bind而不是表达式来进行数据描述 .

3 years ago

ng-bind 也更安全,因为它将 html 表示为字符串 .

因此,例如, '<script on*=maliciousCode()></script>' 将显示为字符串,不会被执行 .

3 years ago

According to Angular Doc:
由于 ngBind 是一个元素属性,它使得页面加载时绑定对用户不可见......这是主要区别......

基本上直到每个 dom 元素都没有加载,我们无法看到它们,因为 ngBind 是该元素的属性,它等待直到doms进入游戏... more info below

ngBind

  • 模块ng中的指令

ngBind attribute 告诉 AngularJS 用指定表达式的值替换指定HTML元素的文本内容,并在该表达式的值更改时更新文本内容 .

通常, you don't use ngBind directly ,但您使用双重卷标,如 { } ,它类似但不那么冗长 .

如果在AngularJS编译它之前浏览器在其原始状态下暂时显示模板,则最好使用ngBind而不是{} . 由于ngBind是一个元素属性,因此在加载页面时,它会使绑定对用户不可见 .

这个问题的 alternative solution 将使用 ngCloak 指令 . visit here

有关 ngbind 的更多信息,请访问此页:https://docs.angularjs.org/api/ng/directive/ngBind

你可以做这样的属性, ng-bind

<div ng-bind="my.name"></div>

或插值如下:

<div>{{my.name}}</div>

或者使用AngularJs中的ng-cloak属性:

<div id="my-name" ng-cloak>{{my.name}}</div>

ng-cloak避免在dom上闪烁,等待一切准备就绪!这等于 ng-bind 属性......

3 years ago

你可以参考这个网站,它会给你一个更好的解释,因为我知道{{}}这比ng-bind慢 .

http://corpus.hubwiz.com/2/angularjs/16125872.html参考此网站 .