Geek Answers Handbook

In Angular, is there a way to prevent flickering in expressions containing concatenated values?

Is there a way to prevent flickering of patterns containing concatenated values ​​such as {{person.LastName+ ", " + person.FirstName}} ?

I do not want to see "," until $scope.person is attached.

Is this something I can put in a filter? Would you create a filter for something so trivial?

+8
angularjs
source share
5 answers

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

I use a 2 second timeout in the controller so you can see the flicker if you remove ng-show.

+6
source share

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

The ngCloak directive is used to prevent the Angular html template from being displayed briefly by the browser in its raw (uncompiled) when the application loads. Use this directive to avoid the unwanted flickering effect caused by the display of the html template.

+14
source share

You can use the "ng-bind" attribute in the wrapper tag, instead:

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

You can do it:

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

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

+5
source share

There were some problems 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';
0
source share

This is because you are loading angular js lib not from the <head></head> section. If that doesn't really matter to you, just move the angular <script> to the head and it should stop blinking.

-one
source share

More articles:


All Articles