Filtro angolare che genera HTML

Question

Ho un piccolo filtro angolare che inserisce un'icona (bootstrap) al posto di un valore reale. funziona, ma il codice HTML è codificato:

var conApp = angular.module('conApp', []); 
    conApp.filter('trueIcon', function($filter){ 
    return function(booleanValue){ 
     return booleanValue ? '<i class="icon-ok"></i>' : ''; 
    } 
    }); 

devo implementare un altro filtro per decodificare il codice html? Esiste un modo "angolare" per farlo?

Answer 1

È necessario utilizzare ng-bind-html per eseguire il rendering di html.

<span ng-bind-html="foo | trueIcon"></span> 

Detto questo ... non è proprio quello a cui servono i filtri. I filtri sono più utili per lo scrubbing dei dati scritti in una vista, piuttosto che per generare elementi della vista/DOM stessa. Probabilmente sarete meglio creare una direttiva che:

app.directive('trueIcon', function() { 
    return { 
     restrict: 'E', 
     template: '<i ng-class="{\'icon-ok\': value, \'icon-not-okay\': !value}"></i>', 
     scope: { 
     value: '=' 
     } 
    }; 
}); 

<true-icon value="foo"></true-icon> 

Answer 2

AngularJS è igienizzante risultati della valutazione delle espressioni di default. Per visualizzare HTML come markup hai 2 opzioni:

• http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml (dal modulo ngSanitize)
• http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe (io non consiglierei questo dato che apre potenziali rischi per la sicurezza).

Mentre quanto sopra farà funzionare il filtro, forse dovresti considerare di trasformarlo in una direttiva?