Wie füge ich HTML ein, wenn ng-bind-html-unsafe entfernt wurde?

Ich versuche, den $sanitizeAnbieter und die ng-bind-htm-unsafeDirektive zu verwenden, damit mein Controller HTML in ein DIV einfügen kann.

Ich kann es jedoch nicht zum Laufen bringen.

<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>

Ich habe festgestellt, dass es daran liegt, dass es aus AngularJS entfernt wurde (danke).

Aber ohne ng-bind-html-unsafebekomme ich diesen Fehler:

http://errors.angularjs.org/undefined/$sce/unsafe

1. Sie müssen sicherstellen, dass sanitize.js geladen ist. Laden Sie es beispielsweise von https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION‹/angular-sanitize.min.js
2. Sie müssen das ngSanitizeModul in Ihr app Beispiel aufnehmen:var app = angular.module('myApp', ['ngSanitize']);
3. Sie müssen nur mit ng-bind-htmldem ursprünglichen htmlInhalt binden . Sie müssen nichts anderes in Ihrem Controller tun. Das Parsen und Konvertieren erfolgt automatisch durch die ngBindHtmlDirektive. (Lesen Sie dazu den How does it workAbschnitt: $ sce ). Also, in deinem Fall <div ng-bind-html="preview_data.preview.embed.html"></div>würde die Arbeit machen.

Anstatt eine Funktion in Ihrem Bereich zu deklarieren, wie von Alex vorgeschlagen, können Sie sie in einen einfachen Filter konvertieren:

angular.module('myApp')
    .filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

Dann können Sie es so verwenden:

<div ng-bind-html="preview_data.preview.embed.html | to_trusted"></div>

Und hier ist ein funktionierendes Beispiel: http://jsfiddle.net/leeroy/6j4Lg/1/

Sie haben angegeben, dass Sie Angular 1.2.0 verwenden ... da einer der anderen angegebenen Kommentare ng-bind-html-unsafeveraltet ist.

Stattdessen möchten Sie Folgendes tun:

<div ng-bind-html="preview_data.preview.embed.htmlSafe"></div>

Fügen Sie in Ihren Controller den $sceDienst ein und markieren Sie den HTML-Code als "vertrauenswürdig":

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
  // ...
  $scope.preview_data.preview.embed.htmlSafe = 
     $sce.trustAsHtml(preview_data.preview.embed.html);
}

Beachten Sie, dass Sie 1.2.0-rc3 oder neuer verwenden möchten. (Sie haben einen Fehler in rc3 behoben, der "Beobachter" daran hinderte, ordnungsgemäß mit vertrauenswürdigem HTML zu arbeiten.)

Für mich ist die einfachste und flexibelste Lösung:

<div ng-bind-html="to_trusted(preview_data.preview.embed.html)"></div>

Und fügen Sie Ihrem Controller eine Funktion hinzu:

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

Vergessen Sie nicht, $scedie Initialisierung Ihres Controllers zu ergänzen .

Die beste Lösung dafür ist meiner Meinung nach:

1. Erstellen Sie einen benutzerdefinierten Filter, der sich beispielsweise in einer Datei common.module.js befinden kann und in Ihrer gesamten App verwendet wird:

   var app = angular.module('common.module', []);
   
   // html filter (render text as html)
   app.filter('html', ['$sce', function ($sce) { 
       return function (text) {
           return $sce.trustAsHtml(text);
       };    
   }])

2. Verwendungszweck:

   <span ng-bind-html="yourDataValue | html"></span>

Nun - ich verstehe nicht, warum die Richtlinie ng-bind-htmlnicht trustAsHtmlTeil ihrer Funktion ist - scheint mir ein bisschen dumm, dass dies nicht der Fall ist

Wie auch immer - so mache ich das - 67% der Zeit funktioniert es immer.

Sie können Ihre eigene einfache unsichere HTML-Bindung erstellen. Wenn Sie Benutzereingaben verwenden, kann dies natürlich ein Sicherheitsrisiko darstellen.

App.directive('simpleHtml', function() {
  return function(scope, element, attr) {
    scope.$watch(attr.simpleHtml, function (value) {
      element.html(scope.$eval(attr.simpleHtml));
    })
  };
})

Sie müssen {{}} nicht in ng-bind-html-unsafe verwenden:

<div ng-bind-html-unsafe="preview_data.preview.embed.html"></div>

Hier ist ein Beispiel: http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

Der Operator {{}} ist im Wesentlichen nur eine Abkürzung für ng-bind. Was Sie also versucht haben, entspricht einer Bindung innerhalb einer Bindung, die nicht funktioniert.

Ich hatte ein ähnliches Problem. Ich konnte immer noch keinen Inhalt von meinen auf github gehosteten Markdown-Dateien erhalten.

Nach dem Einrichten einer Whitelist (mit hinzugefügter Github-Domain) für den $ sceDelegateProvider in app.js funktionierte dies wie ein Zauber.

Beschreibung: Verwenden Sie eine Whitelist, anstatt sie als vertrauenswürdig zu verpacken, wenn Sie Inhalte von einer anderen URL laden.

Docs: $ sceDelegateProvider und ngInclude (zum Abrufen, Kompilieren und Einschließen eines externen HTML-Fragments)

Strict Contextual Escaping kann vollständig deaktiviert werden, sodass Sie HTML mit injizieren können ng-html-bind. Dies ist eine unsichere Option, aber beim Testen hilfreich.

Beispiel aus der AngularJS-Dokumentation zu$sce :

angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
  // Completely disable SCE.  For demonstration purposes only!
  // Do not use in new projects.
  $sceProvider.enabled(false);
});

Wenn Sie den obigen Konfigurationsabschnitt an Ihre App anhängen, können Sie HTML einfügen ng-html-bind, aber wie im Dokument erwähnt:

SCE bietet Ihnen viele Sicherheitsvorteile bei geringem Codierungsaufwand. Es wird viel schwieriger sein, eine SCE-deaktivierte Anwendung entweder selbst zu sichern oder SCE zu einem späteren Zeitpunkt zu aktivieren. Es kann sinnvoll sein, SCE für Fälle zu deaktivieren, in denen viel Code vorhanden ist, der vor der Einführung von SCE geschrieben wurde, und Sie jeweils ein Modul migrieren.

Sie können einen solchen Filter verwenden

angular.module('app').filter('trustAs', ['$sce', 
    function($sce) {
        return function (input, type) {
            if (typeof input === "string") {
                return $sce.trustAs(type || 'html', input);
            }
            console.log("trustAs filter. Error. input isn't a string");
            return "";
        };
    }
]);

Verwendung

<div ng-bind-html="myData | trustAs"></div>

Es kann für andere Ressourcentypen verwendet werden, z. B. für den Quelllink für Iframes und andere hier deklarierte Typen