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

Question

我参加了一个有角度的演讲，其中一个人提到ng-bind比{{}}绑定更好。

其中一个原因是，ng-bind将变量放入监视列表中，并且只有在模型更改时才会将数据推送到视图中，另一方面，{{}}将每次插入表达式时间（我猜它是角度周期）并推动值，即使值发生了变化。

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

Answer 1

可见性：

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

---

<强>性能：

{{}} 慢得多。

这个ng-bind是一个指令，它会在传递的变量上放置一个观察者。 因此ng-bind仅适用于传递的值实际发生变化的情况。

另一方面，括号将脏检查并在每个 $digest中刷新，即使它不必要< /强>

---

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

---

<强>建议：

如果您使用 angular-translate 之类的翻译模块，请始终在括号注释之前使用指令。

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

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

---

更新28.11.2014 （但可能不在此主题）：

在Angular 1.3x中引入了bindonce功能。因此，您可以绑定表达式/属性的值一次（将在！=＆＃39; undefined＆＃39;时绑定）。

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

使用方法：  在绑定之前放置::：

<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>

Answer 6

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

Answer 7

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

当您的页面未加载或您的互联网速度较慢或网站加载一半时，您可以看到这些类型的问题（检查带有读取标记的屏幕截图）将被触发屏幕是完全奇怪的。为了避免这种情况，我们应该使用Ng-bind

Answer 8

ng-bind 也存在问题。当您尝试使用角度过滤器，限制或其他内容时，您可能会遇到问题如果您使用 ng-bind 。但在其他情况下，在 UX 方面 ng-bind 更好。当用户打开页面时，他/她将看到（10ms-100ms）打印符号（ {{...}} ），这就是为什么ng-bind更好。

Answer 9

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

Answer 10

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

例如，'<script on*=maliciousCode()></script>'将显示为字符串而不会被执行。

Answer 11

根据Angular Doc：
由于 ngBind 是一个元素属性，它会在页面加载时使绑定对用户不可见......这是主要区别......

基本上，直到每个 dom 元素都没有加载，我们才能看到它们，因为 ngBind 是元素的属性，它会一直等到doms开始播放...... 以下更多信息

<强> ngBind
- 模块中的指令

ngBind属性告诉 AngularJS 将指定HTML元素的文本内容替换为给定表达式的值，并在该表达式的值更改时更新文本内容

通常，你不直接使用ngBind ，而是使用像 {{expression}} 这样的双重卷标，它类似但不那么详细。

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

此问题的替代解决方案将使用 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 属性...

Answer 12

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

http://corpus.hubwiz.com/2/angularjs/16125872.html 参考这个网站。