Menu
ng-cloak directive?
302
Definition and Usage The ng-cloak directive prevents the document from showing unfinished AngularJS code while AngularJS is being loaded. AngularJS applications can make HTML documents flicker when the application is being loaded, showing the AngularJS code for a second, before all code are executed.
The ng-init directive is used to initialize an AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application.
Definition and Usage The ng-hide directive hides the HTML element if the expression evaluates to true. ng-hide is also a predefined CSS class in AngularJS, and sets the element's display to none .
Definition and UsageThe ng-bind directive tells AngularJS to replace the content of an HTML element with the value of a given variable, or expression. If the value of the given variable, or expression, changes, the content of the specified HTML element will be changed as well.
From the docs:
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
In brief words, you can use ng-cloak directive to prevent uncompiled elements from being displayed. Uncompiled element can be an element that hold and wait for incoming data:
<div ng-cloak>{{myvar}}</div> if myvar controller still not compiled or the data is not populated ng-cloak prevent {{myvar}} from being displayed and will only display the div when the variable is compiled.
Follow this code example and check to results with and without ng-cloak:
<style> [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x- ng-cloak { display: none !important; } </style> <body ng-controller="MyController" ng-cloak> <h3>ngCloak Example</h3> <ol > <li ng-repeat="item in myData"> {{item.title}} </li> </ol> </body> var myApp= angular.module("myApp",['ngResource']); myApp.controller("MyController", ["$scope", "$resource","$timeout", function($scope,$resource,$timeout){ $scope.myData =[]; var youtubeVideoService = $resource("https://gdata.youtube.com/feeds/api/videos?q=googledevelopers&max-results=5&v=2&alt=jsonc&orderby=published"); youtubeVideoService.get() .$promise.then(function(responseData) { angular.forEach(responseData.data.items, function(aSingleRow){ console.log(aSingleRow); $scope.myData.push({ "title":aSingleRow.title }); }); }); }]); The reason given for using ng-cloak Ben is valid, however the outcome of the example provided by Ben will in some situations still display the {{var}}. This is particularly true in the wild when scripts are generally loaded asynchronously or placed at the bottom of any html body.
In Ben's example he's put a <style> at the top but doesn't use it, we should placed the ng-cloak class on the <body>, like so, and use that styling:
<body class="ng-cloak" ng-controller="MyController" ng-cloak> ... This way the content of the body tag will not be shown until Angular changes ng-cloak to display: block or the directive updates the tagged html.
The reason for adding the class is because the ng-cloak directive is parsed after the html has been displayed, so there is always the possibility that your JS thread dies and still displays anything like {{something here}}.
A good example of proper use would be to include the class="ng-cloak" and ng-cloak directive on an ng-repeat directive.
However, if its just the {{}} thats annoying and otherwise the page is fine even when JS thread has crashed, its better to use ng-bind on your tags rather than adding {{}} within them.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
