Arif YILMAZ Arif YILMAZ - 2 years ago 101
AngularJS Question

{{variable}} is displayed on PageLoad,then it is replaced with the value

I am using AngularJS and very new to it. On my pageLoad, it displays {{weather}} and it gets replaced with its correct value. I think angularjs get loaded later than the html. How can I fix this?

<div class="visible-md visible-lg col-md-3 text-center">
<div class="currency" ng-controller="CurrencyController">
<span ng-bind="currencies" ng-cloak></span>

Answer Source

Use angular's ng-cloak directive in a class on the element containing your ng-app. This will prevent any of the partially loaded angular app from displaying until it is all loaded and initialised. Note that you do have to be sure to load angular itself synchronously in HEAD of your page for this to work properly, or if you can only load it at the end there is a css rule (see the documentation link) you can add to hide it.

Once loaded and initialised angular will add a new css rule to override the hiding from the ng-cloak directive.

In your head, either load angular, or if you really don't want to load javascript at the top:

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

It should look something like this:

<div ng-app="myApp" class="ng-cloak">
   ... rest of your app ...

Or if you prefer:

<div ng-app="myApp" ng-cloak>
   ... rest of your app ...
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download