Arif YILMAZ Arif YILMAZ - 13 days ago 5
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">
<h3>Döviz</h3>
<span ng-bind="currencies" ng-cloak></span>
</div>
</div>

Answer

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.

https://docs.angularjs.org/api/ng/directive/ngCloak

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:

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

It should look something like this:

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

Or if you prefer:

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