Estuve trabajando en una api que ahora devolvía texto con html y en la página no se visualizaba correctamente los tag html, aparecían en texto plano y no interpretaba:
«Música <b>texto</b>«
Angular por seguridad trata toda la información como texto plano y para poder interpretar debes indicarle exactamente que texto o variable es confiable para poder mostrarlo como html.
Hay dos formas de realizar esto, con el servicio $sanitize de angular o con el servicio $sce (Strict Contextual Escaping).
$sanitize
Si estás usando AngularJs, debes agregar como dependencia angular-sanitize.js el cual puedes conseguir en la documentación oficial o cualquier otro sitio proveedor, por ejemplo: https://cdnjs.com/libraries/angular-sanitize
Debes agregarlo a tú aplicación:
1 2 3 4 |
angular.module('ejemplo', ['ngSanitize']) .controller('EjemploController', ['$scope', function($scope) { // código }]); |
Puedes usarlo manualmente de esta manera:
1 |
$sanitize(TextoHtml); |
O usando la directiva ng-bind-html:
1 |
<p ng-bind-html="TextoHtml"></p> |
Automáticamente el modulo $sanitize aplica un filtro antes de mostrar la variable TextoHtml para mantener seguro el sitio web.
$sce
Ahora si no quieres incluir una dependencia ni realizar tantas modificaciones, puedes utilizar $sce como un servicio al que puedes usar manualmente para tú mismo indicar que texto es confiable y se pueda utilizar para interpretar html.
Un ejemplo usando en una variable:
1 2 3 |
module.controller('micontrolador', ['$scope', '$http', '$sce',function($scope, $http, $sce) { $scope.documento.textoHtml = $sce.trustAsHtml('<b>Texto con Html<b>'); }]); |
O también puedes crearlo en un filtro para luego usarlo como directiva:
1 2 3 4 5 6 7 8 9 |
angular.module('app',[]).controller('micontrolador',function($scope){ $scope.documento = {}; $scope.documento.textoHtml = '<b>Texto con Html<b>'); }) .filter('trustHtml',function($sce){ return function(html){ return $sce.trustAsHtml(html); } }); |
Y luego usarlo de esta manera en cualquier lugar de tú aplicación y siempre aplicando la directiva «trustHtml»:
1 |
<p ng-bind-html="$scope.documento.textoHtml | trustHtml" ></p> |
En lo personal este último me ha resultado más útil por la estructura de los proyectos que vengo trabajando.