CODEWITHSUNDEEP
angularjs
Kayvan Salimi
Kayvan Salimi

Reputation: 335

Differences between ng-bind and ng-cloak in angularjs

In this question why ng-bind is better than {{}} in angular? I understand the differences between {{}} and ng-bind. On the other hand, I can use ng-cloak instead of ng-bind.

Now my question is what are the differences between ng-bind and ng-cloak?

Upvotes: 14

Views: 3879

Answers (5)

Jeff Dunlop
Jeff Dunlop

Reputation: 893

In a practical sense, if you pass your model into a view from the server, then ng-cloak is fine -- when the page renders, your view data is populated. However, if you're using a more mobile-friendly approach of loading your html and loading your data and perhaps localization with an additional call, then ng-model prevents {{}} flicker between when your page loads and your data arrives. However, I find ng-model insufficient as it can't be used universally, so I generally put an ng-show on a container that exposes the view after the data has been retrieved and a flag has been set.

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

They do the same job relatively.

Looking at api docs, you may find what are they exactly.

ngCloak

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 ng-cloak directive is a built-in angular directive that hides all of the elements on the page that contain the directive.

<div ng-cloak>
<h1>Hello {{ foo }}</h1>
</div>

After the browser is done loading and the compile phase of the template is rendering, angular will delete the ngCloak element attribute and the element will become visible.

ngBind

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

Using ng-bind instead of {{ }} will prevent the unrendered {{ }} from showing up instead of empty elements being rendered. The example from above can be rewritten to the following which will prevent the page from flickering with {{ }}:

<div>
<h1>Hello <span ng-bind="foo"></span></h1>
</div>

Upvotes: 16

Sebastian Nette
Sebastian Nette

Reputation: 7812

You can look up things like that in the Angular Api Docs.

ng-cloak is just a css rule that sets the style to display: none !important so your {{}} expression is not visible until replaced with actual data. https://docs.angularjs.org/api/ng/directive/ngCloak

While ng-bind is an expression itself.

Upvotes: 4

Matteo Rubini
Matteo Rubini

Reputation: 831

From documentation

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.

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

Upvotes: 0

binariedMe
binariedMe

Reputation: 4329

When you use ng-bind, browser do ignore this while after angular is loaded , it binds the value in the view.

While if you use ng-cloak, {{}} will still appear for a short time, but as soon as angular is loaded and parsed, it will omit the {{}} till the compilation occurs.

Upvotes: 0

Related Questions