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

Question

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

User · Accepted Answer

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  lt body gt  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

User · Answer

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

User · Answer

Also  you can use  lt span ng-bind  hello  gt  lt  span gt  instead of   hello      http   jsfiddle net 4LhN9 34

User · Answer

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    lt div class  ng-cloak  gt   name   lt div gt    and    lt li ng-repeat  item in items  ng-cloak gt   item name   lt li gt

User · Answer

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

User · Answer

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    lt div ng-cloak gt     Welcome   data name    lt  div gt    Thats it

User · Answer

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

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

Examples related to angularjs