AngularJS ng-cloak Directive with Example

  Total Views : 945
  Comments : 0
 
  Keywords : What is ng-cloak directive in angularjs, Use of angularjs ng-cloak directive with example, Angularjs ngcloak directive to prevent showing uncompiled code

Here we will learn ng-cloak directive in angularjs with 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 un-compiled form elements while page loading. We can say that ng-cloak directive will hold and wait till operations complete to show 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 required portion of html elements.

Syntax of ng-cloak Directive in AngularJS

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 simple example.

Example of ng-cloak Directive in AngularJS

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 ng-cloak Directive

Following is the result of ng-cloak directive example in angularjs. It will display user name once page loading and condition checkings 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.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User