我在一个有角度的演示中,其中一个人在会议上提到ng-bind比{{}}绑定更好。
其中一个原因是,ng-bind将变量放在观察列表中,只有当有模型更改时,数据才会推送到视图中,另一方面,{{}}每次都会插入表达式(我猜是角周期)并推送值,即使值更改与否。
此外,据说,如果你在屏幕上没有太多的数据,你可以使用{{}},性能问题将不可见。有人能给我解释一下这个问题吗?
我在一个有角度的演示中,其中一个人在会议上提到ng-bind比{{}}绑定更好。
其中一个原因是,ng-bind将变量放在观察列表中,只有当有模型更改时,数据才会推送到视图中,另一方面,{{}}每次都会插入表达式(我猜是角周期)并推送值,即使值更改与否。
此外,据说,如果你在屏幕上没有太多的数据,你可以使用{{}},性能问题将不可见。有人能给我解释一下这个问题吗?
当前回答
这是因为使用{{}}时,angular编译器会同时考虑文本节点和它的父节点,因为有可能合并2个{{}}节点。因此,有额外的链接会增加加载时间。当然,对于少数这样的情况,差异是不重要的,但是当你在一个有大量项目的中继器中使用这个时,它会在较慢的运行环境中造成影响。
其他回答
这是因为使用{{}}时,angular编译器会同时考虑文本节点和它的父节点,因为有可能合并2个{{}}节点。因此,有额外的链接会增加加载时间。当然,对于少数这样的情况,差异是不重要的,但是当你在一个有大量项目的中继器中使用这个时,它会在较慢的运行环境中造成影响。
根据Angular Doc: 由于ngBind是一个元素属性,它使得绑定在页面加载时对用户不可见…这是主要的区别……
基本上,直到每个dom元素都没有加载,我们才能看到它们,因为ngBind是元素的属性,它会一直等到dom开始发挥作用……更多信息如下
ngBind - ng模块中的指令 ngBind属性告诉AngularJS用给定表达式的值替换指定HTML元素的文本内容,并在表达式的值发生变化时更新文本内容。
通常情况下,你不会直接使用ngBind,而是使用双花括号标记,比如{{expression}},它与ngBind相似,但没有那么详细。
如果在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属性…
可见性:
当你的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在表中输出一些数据,每行有多个绑定。 翻译绑定、过滤器输出,它们在每个作用域摘要中执行。
在{{}}中有一些闪烁问题,比如当你刷新页面时,会看到一个短时间的表达式。因此,我们应该使用ng-bind来代替表达式来进行数据描述。
Ng-bind也有自己的问题。当你尝试使用角过滤器,限制或其他东西,你可能会有问题,如果你使用ng-bind。但在其他情况下,ng-bind在UX方面更好。当用户打开一个页面时,他/她将看到(10ms-100ms)打印符号({{…}}),这就是ng-bind更好的原因。