Prevent double curly brace notation from displaying momentarily before angular.js compiles/interpolates document

298

It seems to be primarily an issue in IE when there is a number of images/scripts to load, there can be a good amount of time where the literal {{stringExpression}} in the markup are displayed, then disappear once angular is done with it's compilation/interpolation of the document.

Is there a common reason why this would happen which would indicate I'm doing something generally wrong, or is there a known way to prevent this?

This question is tagged with angularjs

~ Asked on 2012-10-12 20:14:46

The Best Answer is


283

I think that you are looking for the ngCloak directive: https://docs.angularjs.org/api/ng/directive/ngCloak

From the documentation:

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

The directive can be applied to the <body> element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view

~ Answered on 2012-10-12 20:38:23


197

Also, you can use <span ng-bind="hello"></span> instead of {{hello}}.

http://jsfiddle.net/4LhN9/34/

~ Answered on 2012-10-12 20:49:19


Most Viewed Questions: