Prevent double curly brace notation from displaying momentarily before angular.js compiles/interpolates document
AngularjsAngularjs Problem Overview
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?
Angularjs Solutions
Solution 1 - Angularjs
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
Solution 2 - Angularjs
Also, you can use <span ng-bind="hello"></span> instead of {{hello}}.
Solution 3 - Angularjs
To improve the effectiveness of class='ng-cloak' approach when scripts are loaded last, make sure the following css is loaded in the head of the document:
.ng-cloak { display:none; }
Solution 4 - Angularjs
Just add the cloaking CSS to the head of the page or to one of your CSS files:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide {
display: none !important;
}
Then you can use the ngCloak directive according to normal Angular practice, and it will work even before Angular itself is loaded.
This is exactly what Angular does: the code at the end of angular.js adds the above CSS rules to the head of the page.
Solution 5 - Angularjs
In your css add folllowing
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
And then in you code you can add ng-cloak directive. For example,
<div ng-cloak>
Welcome {{data.name}}
</div>
Thats it!
Solution 6 - Angularjs
You also can use ng-attr-src="{{variable}}" instead of src="{{variable}}" and the attribute will only be generated once the compiler compiled the templates. This is mentioned here in the documentation: https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings
Solution 7 - Angularjs
I agree with @pkozlowski.opensource answer, but ng-clock class did't work for me for using with ng-repeat. so I would like to recommend you to use class for simple delimiter expression like {{name}} and ngCloak directive for ng-repeat.
<div class="ng-cloak">{{name}}<div>
and
<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>