What is ng-Cloak directive in AngularJs?

avatar
by Virender
August 6, 2015

What is ng-Cloak directive in AngularJs?

When we work on large application in AngularJs . Some time we  see {{}} expressions till application is loading. ngCloak directive stop such type flicking issue in AngularJs. ngCloak work when  application bootstrapping . It will add ngCloak class on run-time till application bootstrapped and ngCloak remove this class when application bootstrapped successfully. Means ngCloak directive add ngCloak class on selected element and remove ngCloak class when page loaded .

Such type of situation mostly faced when we call asynchronous API.We call a services in our controller. Our controller logic complete successfully. But we sent asynchronous request, if asynchronous request take time then our {{}} expressions will show for few seconds where we used model which populating data from asynchronous API.

If you explore Angular.js you will find out following code.

ngCloak class use CSS display property for hide element.

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

See npCloak directive

var ngCloakDirective = ngDirective({
  compile: function(element, attr) {
    attr.$set(‘ngCloak’, undefined);
    element.removeClass(‘ng-cloak’);
  }
});

ngCloak example -In this example we are using ngCloak it will not show {{}} expression , If request take time.

Plunker – http://plnkr.co/edit/DhTH2hHngUEgwlCLc8rh?p=preview

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
   <title>What is ng-Cloak directive in AngularJs?</title>
   <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
   <style>
      [ng: cloak],
      [ng-cloak],
      [data-ng-cloak],
      [x-ng-cloak],
      .ng-cloak,
      .x- ng-cloak {
         display: none !important;
      }
   </style>
   <script>
      var app = angular.module("myApp", []);
      app.service('googleBlogService',
         function($http) {
            this.getBlogs = function() {
               return $http({
                  method: 'GET',
                  url: "http://api.openweathermap.org/data/2.5/history/city?q=London,UK"
               });
            };
         });
      app.controller("MyDemoController",
         function($scope,
            googleBlogService) {
            $scope.cityWeatherData = [];
            googleBlogService.getBlogs()
               .then(function(data) {
                  $scope.cityWeatherData =
                     data;
               });
         });
   </script>
</head>
<body ng-app="myApp" ng-controller="MyDemoController"
ngCloak>
   <div>The ng-cloak example</div>
   <div>
      <div ng-repeat="cData in cityWeatherData.data.list">
      Date : {{cData.dt}}
         <br /> Weather Description:{{cData.weather.description}}
         <br
         /> Weather main:{{cData.weather.main}}
         <br
         /> Pressure: {{cData.main.pressure}}
         <br
         /> Humidity: {{cData.main.humidity}}
         <br
         />
         <hr />
         <br /> </div>
   </div>
</body>
</html>
 <!DOCTYPE html>
<html>

<head>
<title>What is ng-Cloak directive in AngularJs?</title>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<style>
[ng: cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x- ng-cloak {
display: none !important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.service('googleBlogService',
function($http) {
this.getBlogs = function() {
return $http({
method: 'GET',
url: "http://api.openweathermap.org/data/2.5/history/city?q=London,UK"
});
};
});
app.controller("MyDemoController",
function($scope,
googleBlogService) {
$scope.cityWeatherData = [];
googleBlogService.getBlogs()
.then(function(data) {
$scope.cityWeatherData =
data;
});
});
</script>
</head>

<body ng-app="myApp" ng-controller="MyDemoController"
ngCloak>
<div>The ng-cloak example</div>
<div>
<div ng-repeat="cData in cityWeatherData.data.list">
Date : {{cData.dt}}
<br /> Weather Description:{{cData.weather.description}}
<br
/> Weather main:{{cData.weather.main}}
<br
/> Pressure: {{cData.main.pressure}}
<br
/> Humidity: {{cData.main.humidity}}
<br
/>
<hr />
<br /> </div>
</div>
</body>

</html>

Tags:

Share: