angularjs ng-cloak is not working when page load

Question

angularjs ng-cloak is not working when page load

13.3k views Asked by ree At 20 November 2015 at 02:47

I am new to AngularJS and trying to fix the issue where some of the HTML code displays before ng-if condition gets evaluated. I am using ng-cloak as mentioned in many other stack over flow URLs but it still doesn't work for me. I am trying to load default image if actual image on URL is blank and when page loads, even if actual URL is there, it first blinks with default image and then loads the actual image because ng-cloak doesn't work correctly.

Please help.

I have below code and CSS etc.

Index.html

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <base href="/">

    <title>Some App</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
    <script src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script>

    <style type="text/css">
        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        display: none !important;
    }       
    </style>    
</head>
<body ng-app="app">
some code here
<div ng-view></div>
</body>
</html>

other.html

<div class="content">
    <div style="width: 100px; height: 40px;">

        <div ng-if="image.small">
            <img src="{image.small}}">
        </div>
        <div ng-if="!image.small" ng-cloak>
            <img src="image/default.png">
        </div>
</div>

Original Q&A

There are 6 answers

**Abhilash Augustine** · Answer 1 · 2015-11-20T03:52:35+00:00

Abhilash Augustine On 20 November 2015 at 03:52

You can apply ng-cloak in your body tag. So, you whole body will be displayed only after angular's compilation.

<body ng-cloak ng-app="app">
..
</body>

This will solve your issue.

**Oj G** · Answer 2 · 2015-11-20T06:03:34+00:00

Oj G On 20 November 2015 at 06:03

I did it always on my <html> tag. Like <html ng-app="someApp" ng-cloak>

**Ruben** · Answer 3 · 2016-05-12T23:53:54+00:00

Ruben On 12 May 2016 at 23:53

the best solution is to have a loader while your app is waiting for the data. Instead of putting the ng-if on the flickering element, put in on the parent component and show a loader (it could like FB does a sort of mock of your UI).

**Mittal Ashu** · Answer 4 · 2016-06-22T07:06:09+00:00

Mittal Ashu On 22 June 2016 at 07:06

    <div ng-if="image.small">
        <img src="{image.small}}">
    </div>
    <div ng-if="!image.small" class="ng-cloak">
        <img src="image/default.png">
    </div>

**Pranita Yevle** · Answer 5 · 2018-04-25T10:42:59+00:00

Pranita Yevle On 25 April 2018 at 10:42

The timeout function will do what you want:

// timeout function will give some time for page load.
$timeout(function () {
  //your page load
  $("#panelTask").html(res);
});

**krav** · Answer 6 · 2021-04-23T09:45:12+00:00

krav On 23 April 2021 at 09:45

I had to add :

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}

to my css file for ng-cloak to work.

Like here :How to correctly use ng-cloak directive?

TechQA.

angularjs ng-cloak is not working when page load

There are 6 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in ANGULARJS

Related Questions in NGCLOAK

Related Questions in ASYNC-LOADING

Popular Questions

Popular Tags

Trending Questions