Ng-cloak does not affect the flashing of Angular code
When I hold the F5 key on the next page, the variables AngularJS {{message}}
and {{titleHelp}}
switched on and off.
I read that to remove this I can put ng-cloak
in the body tag. However, this does not work, i.e. Doesn't stop flashing.
Even when I put it here:
<div ng-cloak>message: {{message}}</div>
This variable is still flashing.
What else do I need to do to make ng-cloak work?
<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>
source to share
Have you added a style to hide the [ng-cloak] atrribute?
When this CSS rule is loaded by the browser, all html elements (including their children) marked with the ngCloak directive are hidden. When Angular encounters this directive during template compilation, it removes 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;
}
source to share