0

Angular variable name is display in output when the view is loading.

test_1.js Controller file has assign variable 

$scope.title = "My View";

test_1.html is html view file.

<h1> {{ title }} </h1>

Output :-

My View

But some little time display

{{ title }}

when the process is completed then display right value of title variable.

I want this {{ title }} type of output is not display in browser.

How it is possible ?

Jay Dhameliya
  • 1,689
  • 12
  • 25
  • what you are seeing is the raw HTML before Anguar gets in the picture and bind everything, and update the variables. A possible approach would be to hide the whole HTML via inline CSS and then programatically show it – Lucas Rodriguez Dec 16 '15 at 06:35
  • http://stackoverflow.com/questions/17091364/avoiding-expressions-being-shown-on-page-load possible duplicate. – divakar Dec 16 '15 at 06:36

1 Answers1

3

You need to use ngCloak to avoid this problem

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.

The directive can be applied to the <body> element, but typically a fine-grained application is prefered in order to benefit from progressive rendering of the browser view.

Example 

<h1 ng-cloak> {{ title }} </h1>
Vivek
  • 11,938
  • 19
  • 92
  • 127