我在一个有角度的演示中,其中一个人在会议上提到ng-bind比{{}}绑定更好。
其中一个原因是,ng-bind将变量放在观察列表中,只有当有模型更改时,数据才会推送到视图中,另一方面,{{}}每次都会插入表达式(我猜是角周期)并推送值,即使值更改与否。
此外,据说,如果你在屏幕上没有太多的数据,你可以使用{{}},性能问题将不可见。有人能给我解释一下这个问题吗?
我在一个有角度的演示中,其中一个人在会议上提到ng-bind比{{}}绑定更好。
其中一个原因是,ng-bind将变量放在观察列表中,只有当有模型更改时,数据才会推送到视图中,另一方面,{{}}每次都会插入表达式(我猜是角周期)并推送值,即使值更改与否。
此外,据说,如果你在屏幕上没有太多的数据,你可以使用{{}},性能问题将不可见。有人能给我解释一下这个问题吗?
当前回答
根据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属性…
其他回答
Ng-bind比{{…}}更好
例如,你可以这样做:
<div>
Hello, {{variable}}
</div>
这意味着<div>包含的整个文本Hello, {{variable}}将被复制并存储在内存中。
如果你这样做:
<div>
Hello, <span ng-bind="variable"></span>
</div>
只有值的值会被存储在内存中,angular会注册一个仅由变量组成的watcher (watch表达式)。
根据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属性…
在{{}}中有一些闪烁问题,比如当你刷新页面时,会看到一个短时间的表达式。因此,我们应该使用ng-bind来代替表达式来进行数据描述。
你可以参考这个网站,它会给你一个解释,哪个更好,因为我知道{{}}这比ng-bind慢。
http://corpus.hubwiz.com/2/angularjs/16125872.html 参考这个网站。
基本上,双花括号语法更自然可读,需要的输入也更少。
这两种情况产生相同的输出,但是..如果你选择使用{{}},在angular渲染模板之前,用户可能会在几毫秒内看到{{}}。因此,如果你注意到任何{{}},那么最好使用ng-bind。
同样重要的是,只有在angular应用的index.html中,你才能使用未渲染的{{}}。如果你使用的是指令,那么就没有机会看到模板,因为angular会先渲染模板,然后再把它附加到DOM中。