AngularJS: Bindht HTML-Zeichenfolge mit benutzerdefinierten Stil

Ich soll binden ein html-string mit einem benutzerdefinierten Stil auf den DOM. Allerdings ngSanitize löscht den Stil aus der string.

Beispiel:

In der Steuerung:

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

Und im DOM:

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

Wird weglassen das style-Attribut. Das Ergebnis wird so Aussehen:

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

Statt:

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

Frage: Wie kann ich das erreichen?

InformationsquelleAutor der Frage Tim | 2014-02-01

  1. 52

    Wie bereits erwähnt @Beyers, müssen Sie $sce.trustAsHtml()um es direkt in den DOM, man könnte es so machen, JS/controller-Teil:

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

    Und im DOM/HTML-Teil

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

    InformationsquelleAutor der Antwort Pavel Arapov

  2. 42

    Was über custom angular filter? Das funktioniert in der 1.3.20 

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

    Verwenden Sie es wie <div ng-bind-html="model.content | trusted"></div>

    InformationsquelleAutor der Antwort grigson

  3. 12

    Wenn Sie Vertrauen in die html, dann können Sie $sce.trustAsHtml explizit Vertrauen in die html.
    Kurzes Beispiel:

    Controller (denken Sie daran, um zu injizieren, $sce in den controller):

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

    Und im DOM, dasselbe wie das, was Sie hatte:

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

    InformationsquelleAutor der Antwort Beyers

  4. 0

    Erstellen Sie Ihre eigenen benutzerdefinierten Richtlinie, wird die html-als template oder Verweis mit templateUrl. Innerhalb des html-Codes, die Sie verwenden können ng-Stil um ein Objekt, wie Sie Ihren Stil.

    Hier ein Beispiel: http://jsfiddle.net/tomepejo/5AsQE/

    InformationsquelleAutor der Antwort tomepejo

  5. 0

    Können Sie textAngularcouse ngSanitize whitelists sind nicht flexibel ( siehe diesen Themen weitere details: https://github.com/angular/angular.js/issues/5900)

    InformationsquelleAutor der Antwort bsm

Schreibe einen Kommentar