AngularJS：为什么 ng-bind 在角度上比 {{}} 更好？

能见度：

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

表现：

{{}} 慢得多。

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

另一方面，括号将被脏检查并在每个 $digest中刷新，即使它没有必要。

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

建议：

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

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

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

更新 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 输出表中的一些数据，每行有多个绑定。翻译绑定，过滤输出，在每个作用域摘要中执行。

---

如果您不使用 ng-bind，请改为：

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

在解析 user.name 之前（加载数据之前），您可能会看到实际的 Hello, {{user.name}} 一秒钟

你可以做这样的事情

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

如果这对你来说是个问题。

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

---

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

例如，您可以这样做：

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

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

相反，如果您执行以下操作：

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

只有值的值将存储在内存中，并且 angular 将注册一个仅由变量组成的观察者（观察表达式）。

---

基本上，双花括号语法更自然地可读并且需要更少的输入。

两种情况都会产生相同的输出，但是.. 如果您选择使用 {{}}，则用户有可能会在您的模板被 angular 渲染之前看到 {{}} 几毫秒。因此，如果您注意到任何 {{}}，那么最好使用 ng-bind。

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

---

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

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

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

---

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

---

https://i.stack.imgur.com/02neu.jpg

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

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

---

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

---

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

---

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

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

---

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

基本上直到每个 dom 元素都没有加载，我们看不到它们，因为 ngBind 是元素上的属性，它等到 dom 开始发挥作用......下面的更多信息

ngBind - 模块 ng 中的指令 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 属性...

---

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

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

---