ng-bind-html vs {{interpolation}}

Question

That is my question, what are the pros and cons ?

In my app I am using interpolation but I get errors like this

{{::sport.name}} -> NHL Futures & Props

and if I use ng-bind-html

ng-bind-html="sport.name" -> NHL Futures & Props

in this case ng-bind-html is doing what I want. But, is there something wrong with it ?

Is there one better than the other ?

so tell me, I am open to suggestions.

Answer 1

Actually the main difference between ng-bind and ng-bind-html is the usecase. ng-bind will just display the text interpretation of your variable but ng-bind-html will interpret the html in your variable.

Let say we have a variable in your scope

 $scope.myText = "<b>Hi</b>";

ng-bind or {{}} would display

 <b>Hi</b>

ng-bind-html would display

Hi

Another precision is that ng-bind-html can sanitize your html to prevent code injection.