AngularJS:为什么ng-bind在angular中比{{}}好?

小开

最佳答案

如果你没有使用ng-bind，而是像这样:

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

在解析user.name之前(在数据加载之前)，你可能会看到实际的Hello, \{\{user.name}}。

你可以这样做

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

如果你不介意的话。

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

小开

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

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

同样重要的是，只有在angular应用的index.html中，你才能有未渲染的\{\{}}。如果你使用的是指令，那么就没有机会看到模板，因为angular会先渲染模板，然后再把它附加到DOM中。

小开

ng-bind比\{\{...}}更好

例如，你可以这样做:

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

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

如果你这样做:

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

只有值的值会被存储在内存中，angular会注册一个仅由变量组成的watcher (watch表达式)。

小开

可见性:

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

性能:

\{\{}}是慢得多。

ng-bind是一个指令，它将在传递的变量上放置一个监视器。因此，ng-bind只适用于当传递的值实际上是变化的。< / p >

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

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

建议:

如果你使用诸如angular-translate这样的翻译模块，总是在括号注释前使用指令。

__abc0 =>

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

更新28.11.2014(但可能跑题了):

在Angular 1.3x中引入了bindonce函数。因此，你可以绑定一个表达式/属性的值一次(当!= 'undefined'时将被绑定)。

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

< p >用法: 在绑定前放置:::

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

例子:

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

小开

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

小开

ng-bind也有它的问题。当你尝试使用angular 过滤器，限制或其他东西时，如果你使用ng-bind，你可能会遇到问题。但在其他情况下，ng-bind在用户体验方面更好。当用户打开一个页面时，他/她将看到(10ms-100ms)打印符号(\{\{…}})，这就是ng-bind更好的原因。

小开

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

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

小开

在\{\{}}中有一些闪烁问题，比如当你刷新页面时，会看到一个短时间的表达式。因此，我们应该使用ng-bind来代替表达式来进行数据描述。

小开

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

使用ng-bind将减少页面中的观察者数量。因此，ng-bind将比\{\{...}}更快。因此，如果你只想显示一个值和它的更新，而不想将它的变化从UI反映回控制器，那么选择ng-bind。这将提高页面性能并减少页面加载时间。

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

小开

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

基本上，直到每个dom元素都没有加载，我们才能看到它们，而且因为ngBind是元素的属性，所以它会一直等到dom开始发挥作用……更多信息如下

< p > ngBind < br > - ng模块中的指令 < br > < br > 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-斗篷避免在dom上闪烁，直到一切准备就绪!这等于ng-bind属性…

小开

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

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

小开

Ng-Bind更好的原因是，

当你的页面没有加载或当你的互联网很慢或当你的网站加载一半，然后你可以看到这些类型的问题(查看带“已读”标记的屏幕截图)将在屏幕上被触发，这是完全奇怪的。为了避免这种情况，我们应该使用Ng-bind