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

Question

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?

Answer 1

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.

Answer 2

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.