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

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

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

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

当前回答

如果你没有使用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慢。

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

基本上，双花括号语法更自然可读，需要的输入也更少。

这两种情况产生相同的输出，但是..如果你选择使用{{}}，在angular渲染模板之前，用户可能会在几毫秒内看到{{}}。因此，如果你注意到任何{{}}，那么最好使用ng-bind。

同样重要的是，只有在angular应用的index.html中，你才能使用未渲染的{{}}。如果你使用的是指令，那么就没有机会看到模板，因为angular会先渲染模板，然后再把它附加到DOM中。

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

在{{}}中有一些闪烁问题，比如当你刷新页面时，会看到一个短时间的表达式。因此，我们应该使用ng-bind来代替表达式来进行数据描述。

如果你没有使用ng-bind，而是像这样:

<div>
  Hello, {{user.name}}
</div>

在user.name解析之前(在数据加载之前)，你可能会看到实际的Hello， {{user.name}}

你可以这样做

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

如果你不介意的话。

另一个解决方案是使用ng-cloak。

推荐文章