AngularJS ng-cloak Directive with Example

Here we will learn ng-cloak directive in angularjs with the example, use of angularjs ng-cloak directive and how to use ng-cloak directive in angularjs application with simple example.

AngularJS ng-cloak Directive

The ng-cloak directive in angularjs is a special type of directive which is used to prevent showing an un-compiled form of elements while page is loading. We can say that ng-cloak directive will hold and wait till operations complete to show the elements on page.

 

By using ng-cloak directive in angularjs, we can prevent or avoid undesirable flicker effect to display elements on page. We can use ng-cloak directive with <body> element or we can use it in a required portion of HTML elements.

AngularJS ng-cloak Directive Syntax

Following is the syntax of using ng-cloak directive in angularjs applications.

 

<element ng-cloak>{{your code}}</element>

Now we will see how to use ng-cloak directive with a simple example.

AngularjS ng-cloak Directive Example

Following is the example of using ng-cloak directive in angularjs applications.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs ng-cloak Directive Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script>

var app = angular.module("AngularngcloakApp", []);

app.controller("ngcloakctrl", function ($scope) {

$scope.name = "Tutlane.com";

$scope.users = {

isValid: true

};

});

</script>

</head>

<body ng-app="AngularngcloakApp">

<div ng-controller="ngcloakctrl">

<div ng-cloak ng-if="users.isValid">

{{ name}}

</div>

</div>

</div>

</body>

</html>

In the above code sample, ng-cloak directive prevent to display un-compiled user name till it finish required conditions check and page loading. In case if we didn't use ng-cloak then output will display {{ name }} raw code till it finish all conditions. If we use ng-cloak the output will display as blank till it display all the values.

Output of AngularJS ng-cloak Example

Following is the result of ng-cloak directive example in angularjs. It will display user name once page loading and condition checking are done.

 

Tutlane.com

This is how we can use ng-cloak directive in angularjs to prevent showing un-complied code till page loads completely.