When I hold down the F5 button on the following page, the AngularJS variables {{message}} and {{titleHelp}} blink on and off.
I have read that to remove this I can put ng-cloak in the body tag. This, however, has no effect, i.e. it does not stop the blinking.
Even when I put it here:
<div ng-cloak>message: {{message}}</div>
That variable still blinks.
What else do I have to do so that ng-cloak works?
<html>
<head>
<style type="text/css">
</style>
</head>
<body ng-app="mainModule" ng-controller="dataController" ng-cloak>
<div>message: {{message}}</div>
<div><input type="checkbox" ng-model="desired" ></div>
<div>Title: <input type="text" ng-focus="showHelp()" ng-blur="removeHelp()" ng-model="title"
ng-copy="handleCopy()" /> {{titleHelp}}</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src ="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var mainModule = angular.module('mainModule', []);
function dataController($scope) {
$scope.desired = true;
$scope.message = 'This is a test.';
$scope.showHelp = function () {
$scope.titleHelp = 'this is the title help';
};
$scope.removeHelp = function () {
$scope.titleHelp = '';
};
}
</script>
</body>
</html>
Did you add a style for hiding [ng-cloak] atrribute?
When this css rule is loaded by the browser, all html elements (including their children) that are tagged with the ngCloak directive are hidden. When Angular encounters this directive during the compilation of the template it deletes the ngCloak element attribute, making the compiled element visible.
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}