ng-cloak has not effect whatsoever on blinking Angular code

Question

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 the styles that work in conjunction. Based on the docs: https://docs.angularjs.org/api/ng/directive/ngCloak — Davin Tryon, Jan 06 '15 at 15:46
http://weblog.west-wind.com/posts/2014/Jun/02/AngularJs-ngcloak-Problems-on-large-Pages => on large page, ngCloak may not be efficient. — Mik378, Jan 06 '15 at 15:47
@Mik378 interestingly, that solved the problem as well, even without adding the CSS. — Edward Tanguay, Jan 06 '15 at 15:50

score 5 · Accepted Answer · answered Jan 06 '15 at 15:46

5

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;
}

answered Jan 06 '15 at 15:46

lvarayut

13,963
17
63
87

1

Thanks, that works. I read in the documentation "ngCloak works in cooperation with the following css rule embedded within angular.js and angular.min.js" and figured if it is already embedded, I wouldn't need to add anything. – Edward Tanguay Jan 06 '15 at 15:49
If your angular.js file is in any way async, then it doesn't have a chance to load and add the styles before the page finishes rendering, and thus you'll see the curly brackets. That's why you must inline that ngcloak style at the top of the page. – tdakhla Jan 06 '15 at 17:55

ng-cloak has not effect whatsoever on blinking Angular code

1 Answers1