CODEWITHSUNDEEP
javascriptangularjshandlebars.jsng-bind
Rohit Rane
Rohit Rane

Reputation: 2940

how to prevent handlebars "{{}}" from appearing in the UI in an AngularJs Application before actual data loads?

I have a page, Whose layout is generated based the GET request that returns an array with length in 10000s. So, until the actual that bind to some of the components load, I get the ugly :

{{ binding-model }}

This creates a shabby look and feel and I am getting feedback from my users complaining about this. Isn't there a way to prevent this? Can't the binding object simply appear as "blank" until the actual data loads? Here is a split second snapshot of my application screen when this monstrosity appears : Handlebars All Over the UI

Is there a fix for this?

Upvotes: 1

Views: 274

Answers (2)

Vassilis Pits
Vassilis Pits

Reputation: 3848

You could try ng-bind for this if you wish to have elements blank until the data loads.

For example if you have this:

<span>{{someData}}</span>

Change it to this and you're ready:

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

ng-bind allows you to add expressions not just scope data so you can do lamost everything you want

Upvotes: 2

Jax
Jax

Reputation: 1843

Look into this directive: https://docs.angularjs.org/api/ng/directive/ngCloak

hope it helps.

Upvotes: 2

Related Questions