6

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.

Non
  • 8,409
  • 20
  • 71
  • 123
  • ng-bind-html is used to interpret html instead of just displaying the textual content of your variable. {{hi}} will display "hi" but ng-bind-html="hi" will display a bold hi. – Okazari May 13 '15 at 14:10
  • @Okazari why not post that as an answer? – AncientSwordRage May 13 '15 at 14:12
  • @Okazari hey, but explain a little more, is there something with the performance ? why one is better than the other ? – Non May 13 '15 at 14:13
  • @NietzscheProgrammer `ng-bind-html` sanitize the html using `$sce` while `ng-bind` don't sanitize html..Both are used for different purpose..so we can't compare them on basis of their performance – Pankaj Parkar May 13 '15 at 14:14
  • @Pureferret wasn't sure it was an answer to the question. Should i ?@NietzscheProgrammer I don't have this knowledge, but in my opinion ng-bind-html should be used only on purpose, when you want some HTML in a variable to be interpreted. In your case this is just a workaround to solve your problem. – Okazari May 13 '15 at 14:16
  • @Okazari I definitely think so. If you wanted to dig into performance, it can be edited in later. But as it stands it sounds pretty complete. – AncientSwordRage May 13 '15 at 14:21
  • 1
    Look back to the question a few days ago where you found out about `ng-bind-html` and why you started using it in the first place. `text` vs `html` – charlietfl May 13 '15 at 14:28

2 Answers2

6

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.

Okazari
  • 4,597
  • 1
  • 15
  • 27
2

ng-bind-html under the covers uses $element.html to set the content (after it is either explicitly trusted or sanitized)

{{ }} (or the equivalent ng-bind) uses $element.text (actually $element[0].textContent) to set the content.

So, in other words - the first sets the HTML and the second one sets Text content. That is why you are seeing the difference with &amp;.

New Dev
  • 48,427
  • 12
  • 87
  • 129
  • Another important distinction between `ng-bind` and `{{}}` is that the former allows more control over what your page looks like before Angular loads (if it ever does). – DRobinson May 13 '15 at 14:28