Angular ng-cloak directive

The ng-cloak is a special type of directive with used to which used to prevent un-compile element being displayed. We can say that ng-cloak directive hold and wait to incoming data's.

In the below code, ng-cloak directive prevent to display un-compiled user name and Its not displayed before compile the user name.

1. Without using the ng-cloak the output will display the {{ name }}

2. With using the ng-cloak the output will display blank.

Syntax:

<div ng-cloack>
    <div ng-if="!users.isValid">
        {{ name }}
    </div>
</div>

Example,

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Using ng-cloak directive </title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
  <script>
    var app = angular.module("ngApp", []);
    app.controller('ngController', function($scope) {
      $scope.name = "Anil Singh";

      $scope.users = {
        isValid: true
      };

    });
  </script>
</head>

<body ng-app="ngApp">
  <div ng-controller="ngController">
    <div ng-cloak ng-if="!users.isValid">
      {{ name}}
    </div>
  </div>
</body>

</html>

The Result looks like,

About Blogger

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz