409

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

一个原因，ng-bind将变量放在观察列表中，只有当模型发生变化时才会推送数据以查看，另一方面，{{}}每次都会插入表达式（我猜是角循环）并推送值，即使值改变与否。

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

4

12 回答 12

545

能见度：

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

表现：

{{}}速度要慢得多。

这ng-bind是一个指令，将在传递的变量上放置一个观察者。所以只有当传递的值确实改变ng-bind时才会适用。

另一方面，即使没有必要，括号也会在每个中进行脏检查和刷新。 $digest

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

建议：

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

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

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

更新 28.11.2014（但可能偏离主题）：

在 Angular 1.3xbindonce中引入了该功能。因此，您可以绑定一次表达式/属性的值（将在 != 'undefined' 时绑定）。

当您不希望绑定更改时，这很有用。

用法：::装订前放置：

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

例子：

ng-repeat输出表中的一些数据，每行有多个绑定。翻译绑定，过滤输出，在每个作用域摘要中执行。

于 2014-04-30T07:43:44.623 回答
324

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

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

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

你可以做这样的事情

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

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

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

于 2013-04-20T23:10:29.627 回答
29

ng-bind好于{{...}}

例如，您可以这样做：

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

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

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

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

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

于 2014-04-08T16:02:46.167 回答
15

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

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

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

于 2013-04-20T23:10:54.637 回答
5

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

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

<div>
  Hello, <span ng-bind="variable"></span>
</div>
于 2017-03-15T10:35:55.917 回答
4

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

于 2014-10-23T02:28:01.997 回答
2

在此处输入图像描述

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

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

于 2017-07-31T10:19:54.307 回答
1

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

于 2016-05-25T21:02:52.660 回答
1

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

于 2016-11-09T08:48:10.870 回答
0

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

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

于 2017-04-03T07:17:58.883 回答
0

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

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

于 2016-10-31T15:26:56.517 回答
0

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

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

ngBind
- 模块 ng 中

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

通常，您不直接使用 ngBind，而是使用类似于{{ expression }}的双卷曲标记，它类似但不那么冗长。

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

这个问题的另一种解决方案是使用ngCloak指令。访问这里

有关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属性...

于 2017-03-22T13:46:02.097 回答