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

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

Posted by: admin November 2, 2017 Leave a comment

Questions:

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?

Answers:

I think that you are looking for the ngCloak directive: http://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 typically a
fine-grained application is prefered in order to benefit from
progressive rendering of the browser view.

Questions:
Answers:

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

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

Questions:
Answers:

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; }

Questions:
Answers:

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.

Questions:
Answers:

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!

Questions:
Answers:

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

Questions:
Answers:

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>