1

Estoy creando una API usando para mostrar ciertos textos en la vista, me aparecen las marcas de HTML.

Esta es mi plantilla:

<div class="well well-lg">
  <p class="lead">
    {$ policy.politica $}
  </p>
</div>

Y esto es lo que sale al visualizar la página:

...  nos comprometemos a <mark>garantizar el ejercicio de blah blah blah</mark> al ofrecer un ...

Puesto que estoy usando Bootstrap v3, esperaría ver el texto con fondo coloreado o algo similar en lugar de las etiquetas <mark></mark>. Entiendo que se debe el contenido debe escaparse, pero no sé como hacerlo en AngularJS.

Agradeceré su ayuda.

Nota: Se están usando los delimitadores {$ $} para el binding de Angular por conveniencia porque en servidor se tiene Django que usa {{ }}

9
  • estas seguro que se trata de angular? porque el {$ ... $} eso no es angular, si lo fuera usaria {{ ... }} Commented el 26 abr. 2016 a las 16:42
  • Oh, estoy usando Django y cambien las marcas con $interpolateProvider. Gracias por la aclaración.
    – toledano
    Commented el 26 abr. 2016 a las 16:47
  • La etiqueta djangono es relevante en la pregunta. El comportamiento de AngularJS se modifica desde la propia aplicación de Angular.
    – toledano
    Commented el 26 abr. 2016 a las 18:55
  • si es relevante porque django esta cambiando la notacion por defecto que usa angular y eso hay que aclararlo, por eso ambas etiquetas Commented el 26 abr. 2016 a las 18:58
  • 2
    Pues si es la respuesta correcta, por favor, marcarla como tal para que sirva para el resto de usuarios. Por cierto, en esta respuesta de S.O. en ingles hay un ejemplo para hacer un filtro usando $sce.trustAsHtml, de esta manera sería mas cómodo de usar. Saludos
    – rsciriano
    Commented el 27 abr. 2016 a las 19:03

2 respuestas 2

3

Como alternativa a la solución de jjimenez de usar $sce.trustAsHtml en el controlador se puede crear un filtro que permita usarlo directamente desde la plantilla.

El filtro sería así:

myApp.filter('rawHtml', ['$sce', function($sce){
  return function(val) {
    return $sce.trustAsHtml(val);
  };
}]);

En tu plantilla lo usarías así:

<div class="well well-lg">
  <p class="lead">
    {$ policy.politica | rawHtml $}
  </p>
</div>
2

Ten en cuenta que esto es así como medida de seguridad, para evitar inyecciones de HTML malicioso. Dicho esto, si confías plenamente en ese código HTML, puedes hacerlo usando el servicio $sce de AngularJS [1].

Con esto:

$scope.myContent = $sce.trustAsHtml(someContent);

Y usando en la plantilla la directiva ng-bind-html así:

<div ng-bind-html="myContent"></div>

el contenido de myContentse renderizaría como HTML correctamente.

[1] https://docs.angularjs.org/api/ng/service/$sce

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.