How to correctly use ng-cloak directive?

javascript angularjs angularjs-directive ngcloak

65,316

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.js script 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>

Solution 5

Add below in your css file:-

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

View more solutions

65,316

Author by

Kotaro

Updated on July 08, 2022

Comments

Kotaro almost 2 years

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>

mohamedrias over 9 years

The OP has not set any name to the ng-app directive and using angular 1.3+. Hope thats what preventing it to work
squiroid over 9 years

@mohamedrias may be possible but he is not using ng-controller or anything related to modules so I guess it will not create a problem in this particular case :)
CGutz almost 9 years

This is the method I have used when ng-cloak wasn't available for whatever reason.
devdropper87 over 8 years

I wish all answers on SO were like this :)
Cemre Mengü over 8 years

Works perfectly but could you please elaborate on these css ? what exactly is it doing ?
Hartger over 8 years

@Cemre It adds the display: none property to all variations of the ng-cloak class and directive. This class will be active during the loading time of your app, so this css makes sure the elements with this class aren't displayed.
Mike over 8 years

(from @GregL's doc link), a little more about the WHY: The problem with the OP's code is that the code loads the angular.min.js at the end of the page load, so the HTML (Angular template) is rendered before ng-cloak gets defined. Adding the css rule reference here works simply by defining angular's own ng-cloak style in the <head> so it's there (before Angular.min.js is loaded) immediately when the page loads, even if you don't load angular until the end of the HTML. Doc recommends angular.js load in <head> to avoid/minimize this problem.