Geek Answers Handbook

Ng-cloak does not work on page load

I am new to AngularJS and trying to fix the problem when some of the HTML code is displayed before ng-if status determination. I am hsing ng-cloak as mentioned in many other stack urls downstream, but it still does not work for me. I am trying to load a default image if the actual image at the url is blank and when the page loads even if the actual url is there, it first blinks with the default image and loads the actual image because ng-cloak is not working properly.

Please, help.

I have 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>
+6
source share
4 answers

You can apply ng-cloak in the body tag. Thus, the whole body will only be displayed after angular compilation.

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

This will solve your problem.

+2
source

I always did this on the <html> . Like <html ng-app="someApp" ng-cloak>

+1
source

The best solution is to have a bootloader while your application is waiting for data. Instead of putting ng-if on a flickering element, put it on the parent component and show the loader (perhaps FB makes a kind of layout for your user interface).

0
source 

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

-3
source

More articles:


All Articles