Angularjs: Difference between ng-bind-html vs adding directly to HTML template

Question

I am trying to figure out what is the difference between the below in my HTML template in AngularJS

<span ng-bind-html="'MY_TEXT' | translate">
</span>

and

<span>
{{ 'MY_TEXT' | translate }}
</span>

Answer 1

from my opinion, both are very similar. But there is a slight difference at the beginning when angular compile the DOM.If you use an expression then the curly brackets are visible for a brief amount of time until the angular compiles.

ngBind hide the while the page is loading.

In the angular DOC the mentioned this

The ngBind attribute tells AngularJS 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.

Typically, you don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.

It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before AngularJS compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.

An alternative solution to this problem would be using the ngCloak directive.