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

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

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

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

如果你不使用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

能见度:

虽然您的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输出,在每个范围摘要中执行。

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

例如,你可以这样做:

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

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

如果你做了这样的事情:

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

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

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

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

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

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

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

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

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

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

在这里输入图像描述

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

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

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

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

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

根据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属性…

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

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