AngularJS
ng-cloack directive
ng-cloack directive is used to prevent to show the
angular code while page is loading.
ng-cloak does not work if page will be larger because JS not being loaded till that time.
ng-cloak does not work if page will be larger because JS not being loaded till that time.
For this
you need to add some css with ng-cloack to prevent the page flicking.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>ng-cloak Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
[ng\:cloak],
[ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x- ng-cloak {
display:
none
!important;
}
</style>
</head>
<body>
<div
ng-app="myApp1" ng-controller="Employee1Controller">
<table>
<thead>
<tr>
<th>Days</th>
<th>Available
Time</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in weekData" ng-cloak>
<td>{{item.day}}</td>
<td>{{item.hours}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
var myapp = angular.module('myApp1',
[]);
myapp.controller('Employee1Controller', function ($scope) {
$scope.weekData = [{ day: "Friday", hours: "5:00pm to 12:00am" },
{ day: "Wednesday", hours: "5:00pm to 11:00pm" },
{ day: "Sunday", hours: "11:00am to 11:00pm" },
{ day: "Thursday", hours: "5:00pm to 11:00pm" },
{ day: "Saturday", hours: "11:00am to 12:00am" }
];
});
</script>
No comments:
Post a Comment