ngCloak 是如何工作的？

Question

<html ng-app>
  <body>
    <p ng-cloak>{{foo}}</p>
  </body>
</html>

我的理解方式：

呈现 HTML 页面。
DOMContentLoaded 已发出，Angular 开始其 bootstrap 进程。
在编译阶段，当它看到 ng-cloak 指令时，它应用 display: none !important.
During/after link 阶段和重新渲染之前，它从带有 ng-cloak 指令的事物中删除了 display: none !important 规则。

所以我明白为什么从编译阶段开始到 link 阶段结束时不会显示内容。但我不明白为什么从 HTML 加载到编译阶段开始时不显示内容。

Answer 1

都在documentation:

中解释了

[...] When this css rule is loaded by the browser, all html elements (including their children) that are tagged with the ngCloak directive are hidden. When Angular encounters this directive during the compilation of the template it deletes the ngCloak element attribute, making the compiled element visible.

Answer 2

docs中的说明除外。我在使用异步调用检索数据的网站上工作过，我使用 ng-cloak 来避免显示在编译过程结束之前可能还没有值的变量。我的用例是当 DOMContent 可能在编译过程结束之前完成加载方式但我的 Angular 数据尚未准备好时。希望这能让您了解一个用例，但这不是唯一的用例。

ngCloak 是如何工作的？

How does ngCloak work?

javascript

angularjs

ngcloak