ngCloak

Question

在这个问题中why ng-bind is better than {{}} in angular? 我了解{{}}和ng-bind之间的差异。另一方面，我可以使用ng-cloak代替ng-bind。

现在我的问题是ng-bind和ng-cloak之间的区别是什么？

Answer 1

他们相对做同样的工作。

查看api文档，您可能会发现它们到底是什么。

ngCloak

ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板。使用此指令可避免由html模板显示引起的不良闪烁效应。

ng-cloak指令是一个内置的角度指令，它隐藏了包含指令的页面上的所有元素。

<div ng-cloak>
<h1>Hello {{ foo }}</h1>
</div>

浏览器完成加载后，模板的编译阶段就是渲染，angular将删除ngCloak元素属性和元素将变得可见。

ngBind

ngBind属性告诉Angular将指定HTML元素的文本内容替换为给定表达式的值，并在该表达式的值更改时更新文本内容。

使用ng-bind代替{{ }}会阻止未呈现的{{ }}显示而不是呈现空元素。以上示例可以重写为以下内容，以防止闪烁的页面{{ }}：

<div>
<h1>Hello <span ng-bind="foo"></span></h1>
</div>

Answer 2

你可以在Angular Api Docs中查找类似的内容。

ng-cloak只是一个css规则，它将样式设置为display: none !important，因此在替换为实际数据之前，{{}}表达式不可见。 https://docs.angularjs.org/api/ng/directive/ngCloak

虽然ng-bind本身就是一个表达。

Answer 3

当你使用ng-bind时，浏览器会在加载角度后忽略它，它会绑定视图中的值。

如果你使用ng-cloak，{{}}仍会在短时间内出现，但只要加载并解析了角度，它就会省略{{}}直到编译发生。

Answer 4

来自文档

ngCloak指令用于阻止Angular html模板来自浏览器的原始（未编译）短暂显示在您的应用程序加载时表单。使用此指令可以避免由html模板显示引起的不良闪烁效应。

https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 5

在实际意义上，如果您将模型传递到服务器的视图中，那么ng-cloak就可以了 - 当页面呈现时，您的视图数据会被填充。但是，如果您使用的是更加适合移动设备的方法来加载html并加载数据，也可能使用其他调用进行本地化，那么ng-model会阻止页面加载和数据到达之间的{{}}闪烁。但是，我发现ng-model不够用，因为它不能普遍使用，所以我通常在检索数据并设置了标志后暴露视图的容器上放置一个ng-show。

angular -s中ng-bind和ng-cloak之间的差异

5 个答案:

ngCloak

ngBind