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,
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|