TDG Blog

ng-Cloak directives in AngularJS

Today  I am going to share the interesting article about ng-Cloak directive….


Use of ng-Cloak directive

The ng-Cloak are used to prevent the un-compiled elements from being displayed and un-compiled elements can be  an element that hold and wait for incoming data


<div ng-cloak>{{myCloackVar}}</div>


If myCloackVar controller is not compiled or the myCloackVar data is not populated in ng-cloak prevent {{myCloackVar}} from being displayed and display only the HTML div when the myCloackVar variable is compiled.


Example wihout using ng-cloak:


<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
  <script>
    var app = angular.module("myApp", []);

    app.service('getTestService', function($http) {
      this.getTestService = function() {
        return $http({
          method: 'GET',
          url:baseURL + '/SemanticWebApp/statistics';
        });
      };
    });

    app.controller("MyTestController", function($scope, getTestService) {
      $scope.resultData = [];

      getTestService.getTestService().then(function(data) {
        var items = data.items;
        angular.forEach(items, function(row) {
          $scope.resultData.push({
            "title": row.title
          });
        });
      });
    });
  </script>
</head>

<body ng-controller="MyTestController">
  <div>The ng-cloak example</div>
  <div>
    <div ng-repeat="testResult in resultData">
      {{testResult.title}}
    </div>
  </div>
</body>

</html>


output:
The ng-cloak example {{testResult.title}}

You might be in this way thinking but think if we are consuming a service and we have to wait for 2-5 seconds for its response,it will be awkward to show those curly braces to the customer


So to avoid this we have class name “ng-cloak” in angularJS.Below is the syntax


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

Example using ng-cloak:


<!DOCTYPE html>
<html>

<head>
    <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('getTestService', function($http) {
            this.getTestService = function() {
                return $http({
                    method: 'GET',
                    url: baseURL + '/SemanticWebApp/statistics';
                });
            };
        });

        app.controller("MyTestController", function($scope, getTestService) {
            $scope.resultData = [];

            getTestService.getTestService().then(function(data) {
                var items = data.items;
                angular.forEach(items, function(row) {
                    $scope.resultData.push({
                        "title": row.title
                    });
                });
            });
        });
    </script>
</head>

<body ng-controller="MyTestController" ng-cloak>
    <div>The ng-cloak example</div>
    <div>
        <div ng-repeat="testResult in resultData">
            {{testResult.title}}
        </div>
    </div>
</body>

</html>


Hope this helps you !!!!!
Write a comment
Cancel Reply
    Search
    Subscribe Us
    Author's Recent Posts
    Categories