Come creare il filtro angularjs che restituisce HTML

Question

Dopo aver letto AngularJS tutorial step-9 Ho creato il mio filtro AngularJS, che dovrebbe convertire i dati booleani in html.

Ecco il mio codice di filtro:

angular.module('phonecatFilters', []).filter('iconify', function() { // My custom filter 
    return function (input) { 
     return input ? '<i class="icon-ok"></i>' : '<i class="icon-remove"></i>'; 
    } 
}); 

Ecco il mio codice HTML:

<dt>Infrared</dt> 
    <dd>{{phone.connectivity.infrared | iconify }}"></dd> 

Il problema è che visualizza borwser restituito il valore letterale:

<i class="icon-ok"></i> 

non come icone (o renderizzate html) che dovrebbero apparire.

Here is JSFiddle example

Penso che alcuni sanificazione si verifica durante questo processo.

È possibile disattivare questa sanificazione per questo filtro specifico?

Anche io so come visualizzare le icone non restituendo output HTML dal filtro, ma il testo piuttosto solo 'ok' o 'remove' che io possa poi sostituire a:

<i class="icon-{{phone.connectivity.infrared | iconify}}"><i> 

, ma questo non è quello che voglio .

Answer 1

si dovrebbe usare la direttiva ng-bind-html (richiedono di importare il modulo Sanitize e il file js): https://docs.angularjs.org/api/ng/directive/ngBindHtml

<span ng-bind-html='phone.connectivity.infrared | iconify'></span> 

È inoltre necessario importare il CSS (Bootstrap credo) di essere in grado di vedere l'icona quando funziona

Ho fornito un .

Answer 2

a meno che non sto leggendo male, si sta avvicinando in modo sbagliato

Penso ng-classe è la direttiva è necessario per questo lavoro ed è più sicuro poi rendering attributo di classe.

nel tuo caso è sufficiente aggiungere stringa di oggetto con le corde ID come la classe e il valore come l'espressione valutata

<i ng-class="{ 
'icon-ok':!phone.connectivity.infrared, 
'icon-remove':phone.connectivity.infrared 
}"></i>' 

su un lato nota, si dovrebbe usare direttive (built-in e personalizzato) per manipolare html/dom e se avete bisogno di un più complesso html rendere si dovrebbe guardare direttiva invece

Answer 3

Prova questo filtro

filter('trust', ['$sce',function($sce) { 
    return function(value, type) { 
    return $sce.trustAs(type || 'html', value); 
    } 
}]); 

Gist Link