How to use the actual use of ng-Cloak directive in AngularJs?

One note I would like to add - I have seen for most of the application, just adding the ng-cloak doesn't work. Its because that page might be larger and js not being loaded till that time.

Applying manually CSS for this directive would help here - 

[ng-cloak]  
{  
display: none !important;
}

Hope this would be help to someone!


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.


ng-cloak

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
                }); 
            });
        }); 
}]);

Tags:

Directive

Angularjs

Recent Posts