Differences between ng-bind and ng-cloak in angularjs

Question

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

Answer 1

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.

Answer 2

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>

Answer 3

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.

Answer 4

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

Answer 5

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.