ng-bind-html vs {{interpolation}}

Question

Questa è la mia domanda, quali sono i pro e i contro?

Nella mia app sto usando interpolazione ma ottengo errori come questo

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

e se uso ng-bind-html

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

in questo caso ng-bind-html sta facendo quello che voglio. Ma c'è qualcosa di sbagliato in questo?

C'è uno migliore dell'altro?

quindi dimmi, sono aperto a suggerimenti.

Answer 1

In realtà la differenza principale tra ng-bind e ng-bind-html è il caso d'uso. ng-bind mostrerà solo l'interpretazione del testo della variabile, ma ng-bind-html interpreterà l'html nella variabile.

diciamo che abbiamo una variabile nel vostro ambito

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

ng-bind o {{}} visualizzerebbe

<b>Hi</b> 

ng-bind-html visualizzerebbe

Hi

Un'altra precisione è che ng-bind-html può san itize your html per prevenire l'iniezione di codice.

Answer 2

ng-bind-html sotto le coperte utilizza $element.html per impostare il contenuto (dopo che è sia attendibile in modo esplicito o disinfettato)

{{ }} (o l'equivalente ng-bind) utilizza $element.text (in realtà $element[0].textContent) per impostare il contenuto.

Quindi, in altre parole, il primo imposta l'HTML e il secondo imposta il contenuto del testo. Ecco perché stai vedendo la differenza con &.