14

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?

Kayvan Salimi
  • 335
  • 2
  • 13
  • 1
    When you use ng-bind, you can load angular in the end as well... But when you use ng-cloak, you must include angular in start to get clear effect – binariedMe Jul 23 '15 at 06:55
  • @RohitKumar tanks, can u explain it more? – Kayvan Salimi Jul 23 '15 at 06:58
  • I have posted the answer and you can see it clearly that ng-cloak is understandable by angular only, so for the time angular is not loaded, {{}} will still appear but after compilation of view by angular, it will disappear – binariedMe Jul 23 '15 at 06:59

5 Answers5

16

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>
Community
  • 1
  • 1
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
4

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.

Sebastian Nette
  • 7,364
  • 2
  • 17
  • 17
0

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.

binariedMe
  • 4,309
  • 1
  • 18
  • 34
0

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

Matteo Rubini
  • 831
  • 5
  • 9
0

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.

Jeff Dunlop
  • 893
  • 1
  • 7
  • 20