17

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.

Damjan Pavlica
  • 31,277
  • 10
  • 71
  • 76
TMH
  • 6,096
  • 7
  • 51
  • 88
  • 2
    use ngCloak directive http://docs.angularjs.org/api/ng/directive/ngCloak – doodeec Feb 25 '14 at 09:37
  • 2
    Take a look at `ng-cloak` – Lucius Feb 25 '14 at 09:38
  • Does this answer your question? [Prevent double curly brace notation from displaying momentarily before angular.js compiles/interpolates document](https://stackoverflow.com/questions/12866447/prevent-double-curly-brace-notation-from-displaying-momentarily-before-angular-j) – ggorlen May 01 '23 at 03:45

5 Answers5

32

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.

lukas.pukenis
  • 13,057
  • 12
  • 47
  • 81
9

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

Rama Krshna Ila
  • 486
  • 3
  • 11
2

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

Michael Kassa
  • 141
  • 4
1

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.

Judy007
  • 5,484
  • 4
  • 46
  • 68
0

You can use ng-bind instead of expression like

<span ng-bind="data"></span>
Pang
  • 9,564
  • 146
  • 81
  • 122
GAURAV ROY
  • 1,885
  • 1
  • 12
  • 4