AngularJS and the proper use of ngCloak

Question

Quote from one of the comments regarding the ngCloak directive ( AngularJS Documentation ):

This is really necessary on your "index.html" page, as the browser may try to do something before Angular has the chance to parse / compile it. At runtime, when Angular retrieves content due to ng-view, ng-include, etc., it will be processed by Angular to the browser.

I created an example in jsFiddle to test this, and, from my point of view, the expression is not evaluated before it is displayed in the browser. I would expect the template to be compiled and linked first, and then attached to the DOM - this is not the case.

Does this mean that every {{expression}} inside the templates should also be wrapped in ngCloak to prevent flickering, or am I missing something?

Answer 1

I assume the warning allows the browser to display before angular finishes its job by adding setTimeout with a 0 delay, show the rendered template:

http://jsfiddle.net/g/FLZZR/5/

 function TemplateController ($scope) { $scope.expression = "This should already be rendered..."; setTimeout(function(){ alert("... but it isn't."); }); } 

Additional note: you cannot expect the template to appear in the place where you place your warning, at best it will be hidden, angular use a dirty check to do its magic, and you must let it "digest" your changes for them in the DOM.