CODEWITHSUNDEEP
javascriptangularjsangularjs-bindingsinterpolation-directive
xRobot
xRobot

Reputation: 26565

How avoid to show {{ ... }} at the start?

I am developing some simple angularjs SPA and I have noticed that at the start, for less than a seconds, in the SPA are displayed many {{ ... }} before angularjs load the data.

How could I avoid this behaviour ?

Upvotes: 1

Views: 118

Answers (5)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

Basically the content show as {{}} are interpolation directive which are nothing but angular un-compiled data.

You could use ng-cloak directive on your body that will have display: none !important CSS, you could use this directive as class or attribute with which you need to add the CSS rule given below.

CSS

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

Alternative

Use ng-bind directive that will evaluate the expression inside the scope of the current controller.

Upvotes: 3

YiLao
YiLao

Reputation: 21

Use ng-bind

It is preferable to use ngBind instead of {{ variable }}, This will avoid {{}} momentarily displayed by the browser. People use {{ variable }} because it is less verbose and more readable.

<div>
      <div ng-bind="name"></div>
</div>

Besides ng-bind you can also use ng-Cloak. Here is the documentation

Upvotes: 1

fauverism
fauverism

Reputation: 1992

don't data-bind inside of an element. use an attribute. the ng-bind attribute is what you're looking for.

So...

<h1>{{ your.data }}</h1>

will become

<h1 ng-bind="your.data"></h1>

ng-cloak works as well, but it's good to know about both.

Upvotes: 1

Reins
Reins

Reputation: 1119

I think ngCloak is the thing you are looking for.

Docs: https://docs.angularjs.org/api/ng/directive/ngCloak

Upvotes: 1

Shyju
Shyju

Reputation: 218872

Use ng-cloak

From the website

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.

<body ng-app="yourAppName" ng-controller="yourController as b" class="ng-cloak">

And with the CSS styles

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  disply: none !important;
}

Upvotes: 1

Related Questions