Menu
Somehow, ng-cloak in AngularJS doesn't work. I want to hide {{ }} while loading the page. Because it looks awful.
<!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Angular Sample</title> </head> <body ng-model="isShow" ng-init="isShow=true"> <p ng-show="isShow"><span ng-cloak>{{ isShow }}</span></p> <p ng-show="!isShow"><span ng-cloak>{{ isShow }}</span></p> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> </body> </html> 
378
Definition and Usage The ng-cloak directive prevents the document from showing unfinished AngularJS code while AngularJS is being loaded. AngularJS applications can make HTML documents flicker when the application is being loaded, showing the AngularJS code for a second, before all code are executed.
The ng-include directive includes HTML from an external file. The included content will be included as childnodes of the specified element. The value of the ng-include attribute can also be an expression, returning a filename. By default, the included file must be located on the same domain as the document.
Add this css from here
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } and use either the class name or attribute on your parent div or anywhere you have defined your app.
eg:
<div ng-app="Random" class="ng-cloak"> </div> From the Angular docs:
For the best result, the
angular.jsscript must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application.
26
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
