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

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

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


当前回答

Ng-bind也有自己的问题。当你尝试使用角过滤器,限制或其他东西,你可能会有问题,如果你使用ng-bind。但在其他情况下,ng-bind在UX方面更好。当用户打开一个页面时,他/她将看到(10ms-100ms)打印符号({{…}}),这就是ng-bind更好的原因。

其他回答

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

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

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

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

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也有自己的问题。当你尝试使用角过滤器,限制或其他东西,你可能会有问题,如果你使用ng-bind。但在其他情况下,ng-bind在UX方面更好。当用户打开一个页面时,他/她将看到(10ms-100ms)打印符号({{…}}),这就是ng-bind更好的原因。