Frage Fügen Sie HTML in die Ansicht ein


Ist es möglich, ein HTML-Fragment in einem AngularJS-Controller zu erstellen und diesen HTML-Code in der Ansicht anzuzeigen?

Dies ergibt sich aus der Anforderung, ein inkonsistentes JSON-Blob in eine verschachtelte Liste von id : value Paare. Daher wird der HTML-Code im Controller erstellt und ich möchte ihn jetzt anzeigen.

Ich habe eine Modelleigenschaft erstellt, kann diese jedoch nicht in der Ansicht darstellen, ohne dass sie lediglich den HTML-Code druckt.


Aktualisieren

Es scheint, dass das Problem von der eckigen Darstellung des erzeugten HTML als String in Anführungszeichen herrührt. Wird versuchen, einen Weg zu finden.

Beispiel Controller:

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';
}

Beispielansicht:

<div ng:bind="customHtml"></div>

Gibt:

<div>
    "<ul><li>render me please</li></ul>"
</div>

752
2018-02-21 17:12


Ursprung


Antworten:


Verwenden Sie für Angular 1.x ng-bind-html im HTML:

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

An diesem Punkt würden Sie ein attempting to use an unsafe value in a safe context Fehler, so dass Sie entweder verwenden müssen ngSanitisieren oder $ sce um das zu lösen.

$ sce

Benutzen $sce.trustAsHtml() in der Steuerung, um die HTML-Zeichenfolge zu konvertieren.

 $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitisieren

Es gibt 2 Schritte:

  1. Schließen Sie die Ressource angular-sanitize.min.js ein, z. B .:
    <script src="lib/angular/angular-sanitize.min.js"></script>

  2. Fügen Sie ngSanitize in einer js-Datei (Controller oder normalerweise app.js) hinzu:
    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])


1070
2018-06-10 19:39



Sie können auch einen Filter wie folgt erstellen:

var app = angular.module("demoApp", ['ngResource']);

app.filter("trust", ['$sce', function($sce) {
  return function(htmlCode){
    return $sce.trustAsHtml(htmlCode);
  }
}]);

Dann in der Ansicht

<div ng-bind-html="trusted_html_variable | trust"></div>

Hinweis: Dieser Filter vertraut jedem übergebenen HTML und könnte eine XSS-Sicherheitslücke aufweisen, wenn Variablen mit Benutzereingaben an ihn übergeben werden.


302
2017-08-26 18:52



Angular JS zeigt HTML innerhalb des Tags 

Die im obigen Link angebotene Lösung funktionierte für mich, keine der Optionen in diesem Thread. Für alle, die das gleiche mit AngularJS Version 1.2.9 suchen

Hier ist eine Kopie:

Ok ich habe eine Lösung dafür gefunden:

JS:

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

HTML:

<p ng-bind-html="renderHtml(value.button)"></p>

BEARBEITEN:

Hier ist das Setup:

JS-Datei:

angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce',
    function ($scope, $http, $sce) {
        $scope.renderHtml = function (htmlCode) {
            return $sce.trustAsHtml(htmlCode);
        };

        $scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>'; 

    }]);

HTML-Datei:

<div ng-controller="MyController">
    <div ng-bind-html="renderHtml(body)"></div>
</div>

114
2018-03-25 16:25



Glücklicherweise benötigen Sie keine ausgefallenen Filter oder unsichere Methoden, um diese Fehlermeldung zu vermeiden. Dies ist die vollständige Implementierung, um HTML-Markup in einer Ansicht in der beabsichtigten und sicheren Weise korrekt auszugeben.

Das Desinfektionsmodul muss nach Angular enthalten sein:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>

Dann muss das Modul geladen werden:

angular.module('app', [
  'ngSanitize'
]);

Dadurch können Sie Markup in eine Zeichenfolge von einem Controller, einer Direktive usw. einfügen:

scope.message = "<strong>42</strong> is the <em>answer</em>.";

Schließlich muss es in einer Vorlage wie folgt ausgegeben werden:

<p ng-bind-html="message"></p>

Welches wird die erwartete Ausgabe produzieren: 42 ist der Antworten.


62
2017-10-16 18:32



Ich habe es heute versucht, der einzige Weg, den ich gefunden habe, war dies

<div ng-bind-html-unsafe="expression"></div>


60
2017-07-24 22:49



ng-bind-html-unsafe funktioniert nicht mehr.

Dies ist der kürzeste Weg:

Erstellen Sie einen Filter:

myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

Und Ihrer Meinung nach:

<div ng-bind-html="customHtml | unsafe"></div>

P.S. Für diese Methode müssen Sie nicht die Option einschließen ngSanitize Modul.


49
2017-08-23 02:45



auf HTML

<div ng-controller="myAppController as myCtrl">

<div ng-bind-html-unsafe="myCtrl.comment.msg"></div>

ODER

<div ng-bind-html="myCtrl.comment.msg"></div

auf dem Controller

mySceApp.controller("myAppController", function myAppController( $sce) {

this.myCtrl.comment.msg = $sce.trustAsHtml(html);

funktioniert auch mit $scope.comment.msg = $sce.trustAsHtml(html);


24
2017-12-17 17:20



Ich fand, dass die Verwendung von ng-sanitize mir nicht erlaubte, ng-click in den HTML-Code einzufügen.

Um das zu lösen, habe ich eine Direktive hinzugefügt. So was:

app.directive('htmldiv', function($compile, $parse) {
return {
  restrict: 'E',
  link: function(scope, element, attr) {
    scope.$watch(attr.content, function() {
      element.html($parse(attr.content)(scope));
      $compile(element.contents())(scope);
    }, true);
  }
}
});

Und das ist der HTML:

<htmldiv content="theContent"></htmldiv>

Viel Glück.


9
2017-09-22 21:34



Ab Angular 4 funktioniert das jetzt wie folgt:

<div [innerHTML]="htmlString">
</div>

Aus dieser Frage herausgenommen Hier.


8
2018-06-09 12:47



Tun Sie dies einfach mit ngBindHtml, indem Sie folgen eckige (v1.4) Dokumente,

<div ng-bind-html="expression"></div> 
and expression can be "<ul><li>render me please</li></ul>"

Stellen Sie sicher, dass Sie ngSanitize in die Abhängigkeiten des Moduls aufnehmen. Dann sollte es gut funktionieren.


6
2018-03-19 02:41



Eine andere Lösung, die blrbrs sehr ähnlich ist, außer dass ein Bereichsattribut verwendet wird, ist:

angular.module('app')
.directive('renderHtml', ['$compile', function ($compile) {
    return {
      restrict: 'E',
      scope: {
        html: '='
      },
      link: function postLink(scope, element, attrs) {

          function appendHtml() {
              if(scope.html) {
                  var newElement = angular.element(scope.html);
                  $compile(newElement)(scope);
                  element.append(newElement);
              }
          }

          scope.$watch(function() { return scope.html }, appendHtml);
      }
    };
  }]);

Und dann

<render-html html="htmlAsString"></render-html>

Beachten Sie, dass Sie ersetzen können element.append() mit element.replaceWith()


4
2017-10-01 15:12