Menu
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 multiplengCloakdirectives to small portions of the page to permit progressive rendering of the browser view
Also, you can use <span ng-bind="hello"></span> instead of {{hello}}.
http://jsfiddle.net/4LhN9/34/
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With