AngularJS: Enlazar cadena html con estilo personalizado

Quiero enlazar una cadena html con un estilo personalizado a la DOM. Sin embargo ngSanitize quita el estilo de la cadena.

Por ejemplo:

En el controlador:

$scope.htmlString = "<span style='color: #89a000'>123</span>!";

Y en DOM:

<div data-ng-bind-html="htmlString"></div>

Se omite el atributo de estilo. El resultado se verá así:

<div data-ng-bind-html="htmlString"><span>123</span>!</div>

Lugar de:

<div data-ng-bind-html="htmlString"><span style='color: #89a000'>123</span>!</div>

Pregunta: ¿Cómo puedo lograr esto?

InformationsquelleAutor Tim | 2014-02-01

5 Kommentare

  1. 68

    Como ya se ha mencionado @Beyers, usted tiene que utilizar $sce.trustAsHtml(), para utilizar directamente en el DOM, usted podría hacer algo como esto, JS/controlador de parte:

    $scope.trustAsHtml = function(string) {
        return $sce.trustAsHtml(string);
    };

    Y en DOM/HTML parte

    <div data-ng-bind-html="trustAsHtml(htmlString)"></div>
    • He probado tu código con el AngularJS versión 1.3.15 y no me funcionó 🙁
    • He encontrado el de Chris respuesta con este post y funcionó perfectamente. 🙂 stackoverflow.com/questions/18340872/…
    • hay que tener cuidado, no use esta es si el usuario puede utilizar la entrada de ‘cadena’, de lo contrario tienes un XSS
    • Esta variante es agradable
  2. 50

    Lo que sobre custom filtro angular? Esto funciona en 1.3.20

    angular.module('app.filters')
        .filter('trusted', function($sce){
            return function(html){
                return $sce.trustAsHtml(html)
            }
         })

    Utilizar como <div ng-bind-html="model.content | trusted"></div>

    • Esta es la mejor solución
    • Usted, señor, sólo me salvó un montón de tiempo. Gracias!
  3. 13

    Si confía en el html, entonces usted puede utilizar $sce.trustAsHtml confiar explícitamente en el código html.
    Ejemplo rápido:

    Controlador (recuerde inyectar us $sce en su controlador):

    $scope.htmlString = $sce.trustAsHtml("<span style='color: #89a000'>123</span>!");

    Y en DOM, mismo que lo que había:

    <div data-ng-bind-html="htmlString"></div>
    • No hay otro camino? Preferiblemente desde dentro de la DOM en si mismo. Esto no se terminan de limpiar en mi situación.
    • Además de deshabilitar completamente $sce docs.angularjs.org/api/… (no recomendado), no hay una acumulación en forma de manejar esta dentro de la DOM sí que soy consciente de. Bastante seguro de que usted debe ser capaz de hacer esto de escribir tu propia directiva.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea