ngCloak如何运作?

时间:2015-07-24 22:27:29

标签: javascript angularjs ngcloak

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

我理解它的方式:

  1. 呈现HTML页面。
  2. 发出DOMContentLoaded,Angular启动其引导过程。
  3. 在编译阶段,当它看到ng-cloak指令时,它会应用display: none !important
  4. 在链接阶段期间/之后和重新渲染之前,它会从display: none !important指令的内容中删除ng-cloak规则。
  5. 所以我理解为什么从编译阶段开始到链接阶段结束时都不会显示事物。但是我不明白为什么从HTML加载到编译阶段开始就不能显示出来。

2 个答案:

答案 0 :(得分:1)

所有这些都在documentation中解释:

  

[...]当浏览器加载此css规则时,将隐藏使用ngCloak指令标记的所有html元素(包括其子元素)。当Angular在编译模板期间遇到此指令时,它会删除ngCloak元素属性,使编译的元素可见。

答案 1 :(得分:0)

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