CODEWITHSUNDEEP
angularjsngcloak
TMH
TMH

Reputation: 6246

Hide Angular brackets until javascript loaded

I have a few bits of HTML like 

<p class="noresults">{{numberOfContacts}} Results Are Available</p>

Is it possible for me to hide {{numberOfContacts}} until Angular has loaded? So it would just say Results Are Available

I've seem some solutions such as hiding the entire body until Angular has loaded, but I'd rather not do that if possible.

Upvotes: 17

Views: 9399

Answers (5)

Judy007
Judy007

Reputation: 5870

This is typically only an issue when working with complex content on really slow devices. In those instances, there can be a brief moment when the browser displays the HTML in the document while AngularJS is parsing the HTML, getting ready, and processing the directives. In this interval of time, any inline template expressions you have defined will be visible to the user. Most devices nowadays have pretty good browsers which are quick enough to prevent this from being an issue. There are two ways to solve the problem.

  1. Avoid using inline template expressions and stick with ng-bind directive.
  2. (Best) Use the ng-cloak directive which will hide the content until Angular has finished processing it. Basically, the ng-cloak directive uses CSS to hide the elements and angular removes the CSS class when the content has been processed, ensuring that the user never sees the {{ and }} characters of a template expression. One strategy to consider is using the ng-cloak directly to the body element, which will ensure that the user will see an empty browser while AngularJS loads. However, you can be more specific by applying it to parts of the document where there are inline expressions.

I have seen issues with ng-cloak not working when added to an element. In the past, I have worked around this issue by simply adding ng-cloak class to element.

Upvotes: 1

GAURAV ROY
GAURAV ROY

Reputation: 1885

You can use ng-bind instead of expression like

<span ng-bind="data"></span>

Upvotes: 0

Michael Kassa
Michael Kassa

Reputation: 151

Sometimes, even if I used the ng-cloak, I could still see the braces for a few seconds. Adding the following style resolved my issue:

[ng-cloak]
{
  display: none !important;
}

Please see this link link for more explanation.

Hope it helps :D

Upvotes: 2

Rama Krshna Ila
Rama Krshna Ila

Reputation: 496

use <span ng-bind="numberOfContacts" /> instead of {{numberOfContacts}}

Upvotes: 9

lukas.pukenis
lukas.pukenis

Reputation: 13597

Yes, use ng-cloak. Simply add class="ng-cloak" or ng-cloak to an element like this

Using directive <div ng-cloak></div>

Using class <div class="ng-cloak"></div>

It's simply a set of CSS rules with display: none !important and as Angular has rendered your DOM it removes the ng-cloak so an element is visible.

Upvotes: 33

Related Questions