renderizar - Cómo crear el filtro angularjs que genera HTML

ng-bind-html angular 5

Question

Después de leer el tutorial de AngularJS paso-9 , he creado mi propio filtro AngularJS, que debe convertir datos booleanos en html.

Aquí está mi código de 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>'';
}
});

Aquí está mi código HTML:

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

El problema es que las pantallas de borwser devolvían el valor literalmente como:

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

no como iconos (o html renderizado) que deberían aparecer.

Aquí está el ejemplo de JSFiddle

Creo que se produce cierta desinfección durante este proceso.

¿Es posible desactivar esta desinfección para este filtro específico?

También sé cómo mostrar íconos al no devolver el resultado HTML desde el filtro, sino simplemente ''aceptar'' o ''eliminar'' el texto, que luego puedo sustituir por:

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

pero esto no es lo que quiero

Answer 1

Debe usar la directiva ng-bind-html (se requiere importar el módulo sanitize y el archivo js): https://docs.angularjs.org/api/ng/directive/ngBindHtml

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

También debe importar el CSS ( Bootstrap , supongo) para poder ver el ícono cuando funcione.

He proporcionado un ejemplo de trabajo .

Answer 2

Prueba este filtro

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

requiere angular-sanitize

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

Enlace Gist

Answer 3

a menos que lo lea mal, te estás acercando de la manera incorrecta

Creo que ng-class es la directiva que necesitas para este trabajo y es más segura que el atributo de clase.

en su caso solo agregue cadena de objetos con las cadenas de identificación como la clase y el valor como la expresión evaluada

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

en una nota lateral, solo debería usar directivas (integradas y personalizadas) para manipular html / dom y si necesitaba un renderizado html más complejo, debería mirar la directiva en su lugar