How to correctly use ng-cloak directive?
Solution 1:
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>
Solution 2:
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.
Solution 3:
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;
}
Solution 4:
Using ngBind should eliminate that as well (I develop in SharePoint sometimes and ngCloak won't work).
AngularJS Docs:
It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.
An alternative solution to this problem would be using the ngCloak directive.
JS:
var app = angular.module('test', []);
app.controller('testCtrl', ['$scope', function($scope) {
$scope.test = "Hello World";
}]);
HTML:
<html ng-app="test">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
<h1 ng-bind="test"></h1>
</body>
</html>