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

我是在一个angular度的演示文稿，并在会议上提到ng-bind的人之一是比{{}}绑定更好。

其中一个原因是， ng-bind将variables放在监视列表中，只有当模型发生变化时才会将数据推送到视图中，另一方面， {{}}每次都会插入expression式（我想这是angular度周期），并推动值，即使值改变或不。

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

Answer 1

如果你不使用ng-bind ，而是像这样：

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

在user.name被parsing之前（在数据加载之前） Hello, {{user.name}}您可能会看到实际的Hello, {{user.name}} ，

你可以做这样的事情

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

如果这是你的问题。

另一个解决scheme是使用ng-cloak 。

Answer 2

能见度：

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

---

性能：

{{}} 要慢得多 。

这个ng-bind是一个指令 ，将把一个观察者放在传入的variables上。 所以ng-bind只适用于传递值实际改变的情况 。

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

---

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

---

build议 ：

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

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

如果你需要filterfunction，最好去一个指令，实际上只是使用你的自定义filter。 $ filter服务的文档

---

更新28.11.2014 （但也许不在话下 ）：

在1.3x版本中，引入了“绑定”function。 因此，你可以绑定一个expression式/属性的值一次（当！='undefined'时将被绑定）。

这是很有用的，当你不期望你的约束力改变。

用法：在绑定之前放置“::”

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

例：

ng-repeat在表格中输出一些数据，每行有多个绑定。 翻译绑定，filter输出，在每个范围摘要中执行。

Answer 3

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

例如，你可以这样做：

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

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

如果你做了这样的事情：

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

只有值的值将被存储在内存中，并且angular会注册一个只由variables组成的观察者（watchexpression式）。

Answer 4

基本上双曲线语法更自然可读，并且需要更less的打字。

两种情况都会产生相同的输出结果，但是如果您select使用double-curly，那么您的模板在angular度呈现之前会有一些机会让用户看到{{}}。 所以如果你注意到{{}}那么最好使用ng-bind。

另外非常重要的是，只有在您的angular度应用程序的index.html中，您可以使用未呈现的{{}}。 如果你使用的是模板指令，那么就没有机会看到这个，因为angular度先渲染模板，然后把它附加到DOM。

Answer 5

这是因为使用{{}}angular度编译器考虑到了文本节点和它的父节点，因为有可能合并2 {{}}个节点。 因此，有额外的连接器可以增加加载时间。 当然，对于这种情况，这种差异并不重要，但是当你在一个大量的中继器中使用它时，会在较慢的运行时环境中产生影响。

Answer 6

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

使用ng-bind将减less页面中的观察者数量。 因此ng-bind会比{{..}}更快。 所以，如果你只想显示一个值及其更新，而不想反映它从UI回到控制器的变化，那么去ng-bind 。 这将增加页面性能并减less页面加载时间。

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

Answer 7

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

Answer 8

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

当您的页面没有加载，或者当您的networking速度很慢，或者当您的网站加载一半时，您可以看到这些types的问题（检查屏幕截图带有读取标记）将在完全连线的屏幕上触发。 为了避免这种情况，我们应该Ng-bind

Answer 9

ng-bind也更安全，因为它将html表示为一个string。

因此，例如， '<script on*=maliciousCode()></script>'将显示为一个string，不会被执行。

Answer 10

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

Answer 11

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

基本上直到每个dom元素都没有加载，我们看不到它们，因为ngBind是元素的属性，所以等待doms进入游戏。

ngBind
– 模块ng中的指令

ngBind属性告诉AngularJS将指定的HTML元素的文本内容replace为给定expression式的值，并在expression式的值改变时更新文本内容。

通常情况下， 您不直接使用ngBind ，而是使用类似但较为冗长的{{expression式}}这样的双curl标记。

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

这个问题的另一种解决scheme是使用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属性…

Answer 12

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

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