Come creare un filtro angularjs che restituisca HTML

Dopo aver letto il passaggio 9 del tutorial AngularJS, ho creato il mio filtro AngularJS, che dovrebbe convertire i dati booleani in html.

Ecco il mio codice 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 borwser visualizza il valore restituito letteralmente come:

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

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

Ecco un esempio di JSFiddle

Penso che durante questo processo avvenga una certa sanificazione.

È possibile disattivare questa sanificazione per questo filtro specifico?

Inoltre so come visualizzare le icone non restituendo l'output HTML dal filtro ma piuttosto solo il testo 'ok' o 'rimuovi' che posso quindi sostituire con:

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

ma questo non è quello che voglio.

Dovresti usare la ng-bind-htmldirettiva (richiede 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>

Devi anche importare il CSS ( Bootstrap immagino) per poter vedere l'icona quando funziona.

Ho fornito un esempio funzionante .

a meno che non lo stia leggendo male, ti stai avvicinando nel modo sbagliato

Penso che ng-class sia la direttiva necessaria per questo lavoro ed è più sicuro del rendering nell'attributo di classe.

nel tuo caso aggiungi semplicemente una stringa oggetto con le stringhe id come classe e il valore come espressione valutata

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

in una nota a margine, dovresti usare solo le direttive (integrate e personalizzate) per manipolare html / dom e se hai bisogno di un rendering html più complesso dovresti guardare invece la direttiva

Prova questo filtro

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

necessita di igienizzazione angolare

var app = angular.module("myApp", ['ngSanitize']);

Gist Link