CODEWITHSUNDEEP
angularjs
Jason
Jason

Reputation: 8640

In Angular, is there a way to prevent flicker in expressions that contain concatenated values?

Is there a way to prevent flicker for templates that contain concatenated values such as {{person.LastName+ ", " + person.FirstName}}?

I don't want to see the "," until $scope.person is bound.

Is this something that I might put into a filter? Would you create a filter for something this trivial?

Upvotes: 8

Views: 13334

Answers (5)

Guy
Guy

Reputation: 13306

Had some issues with ng-cloak so i resorted to using plain old css:

<div class="digits" style="display:none;">

And on the controller:

document.querySelector('.digits').style.display = 'block';

Upvotes: 0

recidive
recidive

Reputation: 388

You can use "ng-bind" attribute in your wrapper tag so instead of this:

<span>{{person.LastName+ ", " + person.FirstName}}</span>

You can do this:

<span ng-bind="person.LastName + ', ' + person.FirstName"></span>

This will change the tag text only when the value is properly concatenated.

Upvotes: 5

M K
M K

Reputation: 9416

This happens because you're loading your angular js lib not from the <head></head> section. If it's not a big deal to you, just move your angular <script> tag in the head and it should stop flickering.

Upvotes: -1

bekite
bekite

Reputation: 3444

You can simply use ng-show for this. I've created a demo to show the results. http://plnkr.co/edit/ZAC8RzagPYmLHgXcPazW?p=preview

I'm using a timeout of 2 seconds in the controller so you can see the flicker if you remove ng-show.

Upvotes: 6

ajk
ajk

Reputation: 4603

You can use the ngCloak directive for that. From the docs:

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

Upvotes: 14

Related Questions