angularjs ng-cloak is not working when page load

Question

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>

@ItaloAyres, Thank you for answering but I need to use multiple conditions like if image.small is not there than check for image.large and if that is not there than load default image. Not sure how do I do that using this condition you have showed so I tried using ng-if for this. — ree, Nov 20 '15 at 03:05
Using || assignment it's a JS expression which returns the first not-null value. You can use it with any number of variables like this: X = a || b || c, and X would receive the first one with non null value. — Italo Ayres, Nov 20 '15 at 03:35
So you can have something like: /* You can use functions in ngSrc as well */ — Italo Ayres, Nov 20 '15 at 03:37
[This may satisfy you](http://jsfiddle.net/hwzsgwtr/2). Feel free to modify the variables to see the results. @georgeawg — Italo Ayres, Nov 20 '15 at 03:46
@ItaloAyres, yes after making these changes, it works fine for conditions but my concern is this default image still gets displayed earlier and than it replaced with actual image. ng-cloak is still not working. Please help there. — ree, Nov 20 '15 at 04:28

score 3 · Answer 1 · answered Nov 20 '15 at 03:52

3

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.

answered Nov 20 '15 at 03:52

Abhilash Augustine

4,128
1
24
24

Thank you for answering @Abhilash P A but this is not working as well. After I apply ng-cloak in body tag, does this suppose to show some information related to this when I check on Developers tool on chrome? I see only in the developer tool even after adding ng-cloak as you have showed in example. One more questions is, do I need to load this ng-cloak as module similar to we add controller or service? – ree Nov 20 '15 at 04:00
1

@ree, No, There is no module for `ng-cloak`. It is just a class with property `display:none` and after compilation angular's compiler will remove this class from the element. – Abhilash Augustine Nov 20 '15 at 04:04
So this is still not working for me. What should I do now. Please help. This is what exactly I have in my code now. – ree Nov 20 '15 at 04:05
@ree, remove your `style` part from the head. Because, angular.js will automatically generates this style for all pages. So no need to add this manually. – Abhilash Augustine Nov 20 '15 at 04:11
I have remove style from head and also added ng-show/ng-hide as mentioned here. I still have ng-cloak on body tag but still no luck.

– ree Nov 20 '15 at 04:22
adding ng-cloak stopeed the whole page from being rendered @AbhilashAugustine – user123456 Jan 02 '21 at 21:14
@user123456 Could you please inspect the html element where you have added ng-cloak? If it still have ng-cloak even after angular compilation, then probably Angular team has changed the behaviour. If there is no ng-cloak attribute then you should check for style property (display:none) for ng-cloak. – Abhilash Augustine Jan 23 '21 at 20:16

score 1 · Answer 2 · answered Nov 20 '15 at 06:03

1

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

answered Nov 20 '15 at 06:03

Oj G

39
5

score 1 · Answer 3 · edited Apr 25 '18 at 13:02

1

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

edited Apr 25 '18 at 13:02

Ironcache

1,719
21
33

answered Apr 25 '18 at 10:42

Pranita Yevle

11
1

2

can you add some clarification? – Yahya Hussein Apr 25 '18 at 11:03

score 0 · Answer 4 · answered May 12 '16 at 23:53

0

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).

answered May 12 '16 at 23:53

Ruben

195
2
12

score 0 · Answer 5 · answered Apr 23 '21 at 09:45

0

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?

answered Apr 23 '21 at 09:45

krav

11
1

score -3 · Answer 6 · answered Jun 22 '16 at 07:06

-3

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

answered Jun 22 '16 at 07:06

Mittal Ashu

1

1

Could you add more details to your answer? Makes it easier for OP to know what he have done wrong in his code :) – node_modules Jun 22 '16 at 07:15
While this code snippet may solve the question, [including an explanation](https://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Box Box Box Box Jun 22 '16 at 11:56

angularjs ng-cloak is not working when page load

6 Answers6

Linked