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 related to
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>
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; }
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.
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!
Also, you can use <span ng-bind="hello"></span>
instead of {{hello}}
.
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
Source: Stackoverflow.com