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>
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.
You have to specify these rules in your CSS:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}