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
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 .
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'']);
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