{"id":828,"date":"2021-09-03T12:15:48","date_gmt":"2021-09-03T16:45:48","guid":{"rendered":"http:\/\/gregorgonzalez.com.ve\/blog\/?p=828"},"modified":"2021-09-03T12:15:48","modified_gmt":"2021-09-03T16:45:48","slug":"angularjs-mostrar-texto-como-html-sanitize-sce","status":"publish","type":"post","link":"http:\/\/gregorgonzalez.com.ve\/blog\/angularjs-mostrar-texto-como-html-sanitize-sce\/","title":{"rendered":"AngularJs – Mostrar texto como html $sanitize $sce"},"content":{"rendered":"

Estuve trabajando en una api que ahora devolv\u00eda texto con html y en la p\u00e1gina no se visualizaba correctamente los tag html, aparec\u00edan en texto plano y no interpretaba:<\/span><\/p>\n

\u00ab<\/span>M&uacute;sica <b>texto<\/b><\/span>\u00ab<\/span><\/p>\n

Angular por seguridad trata toda la informaci\u00f3n como texto plano y para poder interpretar debes indicarle exactamente que texto o variable es confiable para poder mostrarlo como html.<\/p>\n

Hay\u00a0 <\/span>dos formas de realizar esto, con el servicio $sanitize de angular o con el servicio $sce (Strict Contextual Escaping).<\/p>\n

$sanitize<\/h2>\n

Si est\u00e1s usando AngularJs, debes agregar como dependencia angular-sanitize.js el cual puedes conseguir en la documentaci\u00f3n oficial o cualquier otro sitio proveedor, por ejemplo: https:\/\/cdnjs.com\/libraries\/angular-sanitize<\/a><\/p>\n

Debes agregarlo a t\u00fa aplicaci\u00f3n:<\/p>\n

angular.module('ejemplo', ['ngSanitize'])\r\n    .controller('EjemploController', ['$scope', function($scope) {\r\n       \/\/ c\u00f3digo\r\n}]);\r\n<\/pre>\n
Puedes usarlo manualmente de esta manera:<\/p>\n
$sanitize(TextoHtml);<\/pre>\n
O usando la directiva ng-bind-html:<\/p>\n
<p ng-bind-html=\"TextoHtml\"><\/p><\/pre>\n
Autom\u00e1ticamente el modulo $sanitize aplica un filtro antes de mostrar la variable TextoHtml para mantener seguro el sitio web.<\/p>\n
$sce<\/h2>\n
Ahora si no quieres incluir una dependencia ni realizar tantas modificaciones, puedes utilizar $sce como un servicio al que puedes usar manualmente para t\u00fa mismo indicar que texto es confiable y se pueda utilizar para interpretar html.<\/p>\n
Un ejemplo usando en una variable:<\/p>\n
module.controller('micontrolador', ['$scope', '$http', '$sce',function($scope, $http, $sce) {\r\n    $scope.documento.textoHtml = $sce.trustAsHtml('<b>Texto con Html<b>');\r\n}]);<\/pre>\n
O tambi\u00e9n puedes crearlo en un filtro para luego usarlo como directiva:<\/p>\n
angular.module('app',[]).controller('micontrolador',function($scope){\r\n    $scope.documento = {};\r\n    $scope.documento.textoHtml = '<b>Texto con Html<b>');\r\n})\r\n.filter('trustHtml',function($sce){\r\n    return function(html){\r\n        return $sce.trustAsHtml(html);\r\n    }\r\n});<\/pre>\n
Y luego usarlo de esta manera en cualquier lugar de t\u00fa aplicaci\u00f3n y siempre aplicando la directiva \u00abtrustHtml\u00bb:<\/p>\n
<p ng-bind-html=\"$scope.documento.textoHtml | trustHtml\" ><\/p><\/pre>\n
En lo personal este \u00faltimo me ha resultado m\u00e1s \u00fatil por la estructura de los proyectos que vengo trabajando.<\/p>\n","protected":false},"excerpt":{"rendered":"
Estuve trabajando en una api que ahora devolv\u00eda texto con html y en la p\u00e1gina no se visualizaba correctamente los tag html, aparec\u00edan en texto plano y no interpretaba: \u00abM&uacute;sica <b>texto<\/b>\u00ab Angular por seguridad trata toda la informaci\u00f3n como texto plano y para poder interpretar debes indicarle exactamente que texto o variable es confiable para […]<\/p>\n","protected":false},"author":1,"featured_media":691,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[232],"tags":[249,310,30,311],"_links":{"self":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/828"}],"collection":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/comments?post=828"}],"version-history":[{"count":2,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/828\/revisions"}],"predecessor-version":[{"id":830,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/828\/revisions\/830"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/media\/691"}],"wp:attachment":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/media?parent=828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/categories?post=828"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/tags?post=828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}