CODEWITHSUNDEEP
javascriptangularjsngcloak
Adam Zerner
Adam Zerner

Reputation: 19238

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.

Upvotes: 0

Views: 185

Answers (2)

Walter R
Walter R

Reputation: 543

Other than the explanation in the docs. I've worked on websites that use async calls to retrieve data and I've used ng-cloak to avoid showing variables that might not have a value yet until the end of the compile process. My use case is when the DOMContent might have finished loading way before the compile process ends but my Angular data is not ready yet. Hope this gives you an idea of a use case but that's not the only one.

Upvotes: 0

pdenes
pdenes

Reputation: 802

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.

Upvotes: 1

Related Questions