Search code examples
javascriptangularjsngcloak

How does ngCloak work?

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

The way I understand it:

  1. The HTML page is rendered.
  2. DOMContentLoaded is emitted, and Angular starts its bootstrap process.
  3. During the compile phase, when it sees the ng-cloak directive, it applies display: none !important.
  4. During/after the link phase and before the re-rendering, it removes that display: none !important rule from things with the ng-cloak directive.

So I understand why things wouldn't be shown from the time the compile phase starts to the end of the link phase. But I don't understand why things wouldn't be shown from the time the HTML is loaded to the start of the compile phase.

Solution

  • It's all explained in the 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.