【问题标题】：Differences between ng-bind and ng-cloak in angularjsangularjs 中 ng-bind 和 ng-cloak 的区别
【发布时间】：2015-07-23 06:54:18
【问题描述】：

在这个问题why ng-bind is better than {{}} in angular? 我了解{{}} 和ng-bind 之间的区别。另一方面，我可以使用ng-cloak 而不是ng-bind。

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

【问题讨论】：

使用 ng-bind 时，最后也可以加载 angular... 但是使用 ng-cloak 时，必须在 start 中包含 angular 才能获得清晰的效果
@RohitKumar 坦克，你能解释一下吗？
我已经发布了答案，您可以清楚地看到 ng-cloak 只能通过 angular 来理解，因此在未加载 angular 时，{{}} 仍会出现，但在视图编译后按角度，它会消失

标签： angularjs

【解决方案1】：

他们做同样的工作。

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

ngCloak

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

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

<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>

【讨论】：

【解决方案2】：

您可以在 Angular Api 文档中查找类似的内容。

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

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

【讨论】：

【解决方案3】：

当您使用 ng-bind 时，浏览器会忽略这一点，而在加载 angular 后，它会绑定视图中的值。

虽然如果你使用 ng-cloak，{{}} 仍然会出现一小段时间，但是一旦 angular 被加载和解析，它会省略 {{}} 直到编译发生。

【讨论】：

【解决方案4】：

来自文档

ngCloak 指令用于阻止 Angular html 模板浏览器以原始（未编译）的形式简要显示应用程序加载时的表单。使用该指令来避免 html模板显示引起的不良闪烁效果。

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

【讨论】：

【解决方案5】：

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

【讨论】：