我在一个有角度的演示中,其中一个人在会议上提到ng-bind比{{}}绑定更好。

其中一个原因是,ng-bind将变量放在观察列表中,只有当有模型更改时,数据才会推送到视图中,另一方面,{{}}每次都会插入表达式(我猜是角周期)并推送值,即使值更改与否。

此外,据说,如果你在屏幕上没有太多的数据,你可以使用{{}},性能问题将不可见。有人能给我解释一下这个问题吗?


当前回答

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

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

其他回答

如果你没有使用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更好的原因是,

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

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

可见性:

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


性能:

{{}}要慢得多。

这个ng-bind是一个指令,它将在传递的变量上放置一个监视器。 所以ng-bind只在传递的值确实发生变化时才会应用。

另一方面,括号将在每个$摘要中进行脏检查和刷新,即使这不是必要的。


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


建议:

如果你使用一个翻译模块,比如angular-translate,总是在括号注释之前使用指令。

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

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


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

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

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

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