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.

Answers


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.


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


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


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.


You can use ng-bind instead of expression like

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

Need Your Help

Understanding a program written into bluej using twos complement.

java windows integer bluej

I just started using Bluej to learn more about how computers store integers. I have a small program that I put into Bluej that sets the value of an integer called x to MAX_VALUE - 3 then adds 1 to ...

What is the advantage of using FAST_FORWARD for defining a cursor?

sql sql-server cursor

What is the advantage of using FAST_FORWARD for defining a cursor? Is it better for performance? why?