Javascript AngularJS：为什么ng bind在AngularJS中比{{}好？

我参加了一次有角度的演讲，会议上提到的一个人

ngbind

比

{}

binding好

原因之一是，

ng bind

将变量放入监视列表中，并且只有当模型发生更改时，数据才会被推送到视图中，另一方面，

{}

将每次插入表达式（我猜是角度循环）并推送值，即使值是否更改

---

另外据说，如果屏幕上没有太多数据，可以使用

{{}

，性能问题将不可见。有人能帮我解释一下这个问题吗？

如果您不使用

ng bind

，请改为这样：

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

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

如果这是你的问题

---

另一个解决方案是使用。

基本上，双卷曲语法更自然易读，需要更少的键入

两种情况产生相同的输出，但。。如果选择使用

{}

，则用户可能会在使用angular渲染模板之前的几毫秒内看到

{}

。因此，如果您注意到任何

{{}

，那么最好使用

ngbind

---

同样重要的是，只有在angular应用程序的index.html中，才能取消呈现

{{}

。如果您使用的是指令so-then-templates，则不可能看到这一点，因为angular首先渲染模板，然后将其附加到DOM中

ngbind

比

{{…}

例如，您可以执行以下操作：

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

---

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

可见性：

当您的angularjs正在引导时，用户可能会在html中看到您放置的括号。这可以通过

ng-clope

处理。但对我来说，这是一种变通方法，如果我使用

ngbind

，我就不需要使用它

---

性能：

{{}

要慢得多

此

ng bind

是一个指令，将在传递的变量上放置一个观察者。 因此，

ng bind

仅在传递的值确实发生更改时才适用

另一方面，括号将被脏检查，并在中每隔

$digest

刷新一次，即使它是不必要的

---

我目前正在构建一个大的单页应用程序（每个视图约500个绑定）。从{{}改为严格的

ngbind

确实在每个

范围内为我们节省了大约20%。$digest

---

建议：

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

如果使用“角度平移”等平移模块，请始终在括号注释之前选择指令

{{'WELCOME'| translate}}

=>

如果您需要一个过滤器函数，最好使用一个指令，它实际上只使用您的自定义过滤器

---

更新日期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>

{{item}

例如：

ng repeat

以输出表中的一些数据，每行有多个绑定。

---

翻译绑定，过滤器输出，在每个范围摘要中执行

这是因为使用

{{}

时，角度编译器同时考虑文本节点及其父节点，因为有可能合并2个

{}

节点。因此，有额外的链接器增加了加载时间。当然，对于一些这样的情况，差异是无关紧要的，但是，当您在大量项目的中继器中使用它时，它将在较慢的运行时环境中造成影响

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

ngbind

也更安全，因为它将

html

表示为字符串

---

例如，

'

将显示为字符串而不会执行。

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

{…}

是指双向数据绑定。但是，ng bind实际上是用于单向数据绑定

使用ng bind将减少页面中的观察者数量。因此，ngbind将比

{{…}

更快。因此，如果您只想显示一个值及其更新，而不想将其从UI中的更改反映回控制器，那么请选择ng bind。这将提高页面性能并缩短页面加载时间

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

你好

根据角度文档：
由于ngBind是一个元素属性，因此当页面加载时，它会使绑定对用户不可见。。。这是主要的区别

基本上，直到每个未加载的dom元素，我们才能看到它们，因为ngBind是元素的属性，所以它会等待dom发挥作用更多信息请参见下文

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

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

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