Hello everyone, Today I am going to share the interesting articles about ng-cloak directive.
1. What is ng-cloak directive?
2. Why we use it?
The ng-cloak directive are use to prevent the un-compiled elements from being displayed and un-compiled elements can be an element that hold and wait for incoming data. i.e.
I am going to share the example code sample with ng-cloak and without ng-cloak as given below.
Click for live Plnkr Demo
1. What is ng-cloak directive?
2. Why we use it?
The ng-cloak directive are use to prevent the un-compiled elements from being displayed and un-compiled elements can be an element that hold and wait for incoming data. i.e.
<div ng-cloack>{{ myCloackVar }}</div> |
<div ng-cloack>{{ 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.I am going to share the example code sample with ng-cloak and without ng-cloak as given below.
Click for live Plnkr Demo
<!DOCTYPE html><html><head> <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('getDemoService', function($http) { this.getDemoResult = function() { return $http({ method: 'GET', url: baseURL + 'Api/AccountPref/Get/' + uid }); }; }); app.controller("MyDemoController", function($scope, getDemoService) { $scope.resultData = []; getDemoService.getDemoResult().then(function(data) { var items = data.items; angular.forEach(items, function(row) { $scope.resultData.push({ "title": row.title }); }); }); }); </script></head><body ng-controller="MyDemoController" ng-cloak> <div>The ng-cloak example</div> <div> <div ng-repeat="rslt in resultData"> {{rslt.title}} </div> </div></body></html> |
<!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('getDemoService', function($http) {
this.getDemoResult = function() {
return $http({
method: 'GET',
url: baseURL + 'Api/AccountPref/Get/' + uid
});
};
});
app.controller("MyDemoController", function($scope, getDemoService) {
$scope.resultData = [];
getDemoService.getDemoResult().then(function(data) {
var items = data.items;
angular.forEach(items, function(row) {
$scope.resultData.push({
"title": row.title
});
});
});
});
</script>
</head>
<body ng-controller="MyDemoController" ng-cloak>
<div>The ng-cloak example</div>
<div>
<div ng-repeat="rslt in resultData">
{{rslt.title}}
</div>
</div>
</body>
</html>
Live demo,