我在一个有角度的演示中,其中一个人在会议上提到ng-bind比{{}}绑定更好。
其中一个原因是,ng-bind将变量放在观察列表中,只有当有模型更改时,数据才会推送到视图中,另一方面,{{}}每次都会插入表达式(我猜是角周期)并推送值,即使值更改与否。
此外,据说,如果你在屏幕上没有太多的数据,你可以使用{{}},性能问题将不可见。有人能给我解释一下这个问题吗?
我在一个有角度的演示中,其中一个人在会议上提到ng-bind比{{}}绑定更好。
其中一个原因是,ng-bind将变量放在观察列表中,只有当有模型更改时,数据才会推送到视图中,另一方面,{{}}每次都会插入表达式(我猜是角周期)并推送值,即使值更改与否。
此外,据说,如果你在屏幕上没有太多的数据,你可以使用{{}},性能问题将不可见。有人能给我解释一下这个问题吗?
当前回答
Ng-bind也更安全,因为它将HTML表示为字符串。
例如,'<script on*=maliciousCode()></script>'将被显示为字符串,而不会被执行。
其他回答
如果你没有使用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也更安全,因为它将HTML表示为字符串。
例如,'<script on*=maliciousCode()></script>'将被显示为字符串,而不会被执行。
基本上,双花括号语法更自然可读,需要的输入也更少。
这两种情况产生相同的输出,但是..如果你选择使用{{}},在angular渲染模板之前,用户可能会在几毫秒内看到{{}}。因此,如果你注意到任何{{}},那么最好使用ng-bind。
同样重要的是,只有在angular应用的index.html中,你才能使用未渲染的{{}}。如果你使用的是指令,那么就没有机会看到模板,因为angular会先渲染模板,然后再把它附加到DOM中。
Ng-bind也有自己的问题。当你尝试使用角过滤器,限制或其他东西,你可能会有问题,如果你使用ng-bind。但在其他情况下,ng-bind在UX方面更好。当用户打开一个页面时,他/她将看到(10ms-100ms)打印符号({{…}}),这就是ng-bind更好的原因。
Ng-bind比{{…}}更好
例如,你可以这样做:
<div>
Hello, {{variable}}
</div>
这意味着<div>包含的整个文本Hello, {{variable}}将被复制并存储在内存中。
如果你这样做:
<div>
Hello, <span ng-bind="variable"></span>
</div>
只有值的值会被存储在内存中,angular会注册一个仅由变量组成的watcher (watch表达式)。