2013-04-11 21 views
23

Qual è il modo migliore per decodificare l'HTML contenuto nelle stringhe passate a un'espressione Angolare?Decodifica HTML in un'espressione angolare

Esempio:

se ho una stringa restituita dal server in questo modo:

var some_val = "Hello <strong>World</strong>!" 

Come posso averlo rendere il codice HTML invece di visualizzarlo come testo?

<!-- Renders to Hello <strong>World</strong>! --> 
<span>{{ some_val }}</span> 

Aggiornamento: Ecco caso reale utilizzo in un ripetitore:

Works (unsanitized)

<div ng-repeat="category in some_list"> 
    <p>{{ category.name }}</p> 
    <p ng-repeat="bullet in category.bullets">{{ bullet.desc }}</p> 
</div> 

non funziona affatto

<div ng-repeat="category in some_list"> 
    <p ng-bind-html="category.name"></p> 
    <p ng-repeat="bullet in category.bullets" ng-bind-html="bullet.desc"></p> 
</div> 
+5

Hai incluso il file angolare sanitize.js che contiene la direttiva ng-bind-html? – jpmorin

+0

Questo era sicuramente parte del problema, ma dovevo usare anche 'ng-bind-html-unsafe'. – Terry

risposta

25

Come descritto here, in the docs:

<span ng-bind-html="some_val"></span> 

Ricordate che some_val deve essere un modello angolare (in pratica, un $scope.some_val deve esistere da qualche parte nella tua app)

EDIT:

vorrei chiarire: ng -bind-html è un servizio nel modulo ngSanitize, che non è incluso nel core angularJS. ng-bind-html-unsafe fa parte del modulo core ng, ma include la stringa fornita dall'utente senza disinfettarlo (vedere l'esempio in the ngBindHtmlUnsafe docs).

Se vuoi/necessità di utilizzare ngBindHtml, è necessario includere ngSanitize - available here

+0

È possibile evitare l'utilizzo di una variabile utilizzando le virgolette: '' – Langdon

+0

Hmm Lo sto usando in un ripetitore e non lo è t lavorando. Forse è un bug. Aggiornerò la domanda originale con il codice del ripetitore nel caso in cui mi sia sfuggito qualcosa di ovvio. – Terry

+0

In base a un commento sulla pagina dei documenti: Domanda: "Sembra che il risultato non sia innerHTMLed ma appena reso come il valore dell'attributo ng-bind-html." Risposta: "Esiste una direttiva ng-bind-html-non sicura che inserisce acutalmente il contenuto come innerHTML. Questo non è un bancomat documentato." Spero possa essere d'aiuto. – jpmorin