write renderizar raw escape div agregar angularjs

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



ng-bind-html angular 5 (3)

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



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


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