AngularJS: Fügen Sie HTML aus einer Zeichenfolge ein

Lesezeit: 2 Minuten

AngularJS Fugen Sie HTML aus einer Zeichenfolge ein
Herr Robert

Ich habe viel danach gesucht, aber entweder kann ich die Antwort nicht finden oder ich verstehe sie nicht. Ein konkretes Beispiel gewinnt die Abstimmung =)

  • Ich habe eine Funktion, die einen HTML-String zurückgibt.
  • Ich kann die Funktion nicht ändern.
  • Ich möchte, dass das durch die Zeichenfolge dargestellte HTML in das DOM eingefügt wird.
  • Ich verwende gerne einen Controller, eine Richtlinie, einen Dienst oder alles andere, was funktioniert (und einigermaßen gute Praxis ist).
  • Haftungsausschluss: Ich verstehe $compile nicht gut.

Folgendes habe ich versucht:

// My magic HTML string function.
function htmlString (str) {
    return "<h1>" + str + "</h1>";
}

function Ctrl ($scope, $compile) {
  $scope.htmlString = htmlString;
}
Ctrl.$inject = ["$scope", "$compile"];

Das hat nicht funktioniert.

Ich habe es auch als Direktive versucht:

// My magic HTML string function.
function htmlString (str) {
    return "<h1>" + str + "</h1>";
}

angular.module("myApp.directives", [])
  .directive("htmlString", function () {
    return {
      restrict: "E",
      scope: { content: "@" },
      template: "{{ htmlStr(content) }}"
    }
  });

  ... and in my HTML ...

  <html-string content="foo"></html-string>

Hilfe?

Notiz

Ich habe mir unter anderem diese angesehen, konnte es aber nicht zum Laufen bringen.

  • AngularJS : Fügen Sie HTML in die Ansicht ein
  • AngularJS $http HTML-Parser
  • anglejs – Einfügen von $compile-d html
  • AngularJS wird nicht in HTML ausgeführt, das mit document.write() eingefügt wurde
  • Escape-HTML-Text in einer AngularJS-Direktive

AngularJS Fugen Sie HTML aus einer Zeichenfolge ein
Ganaraj

Schauen Sie sich das Beispiel in diesem Link an:

http://docs.angularjs.org/api/ngSanitize.$sanitize

Grundsätzlich hat Winkel eine Direktive zum Einfügen von HTML in Seiten. In Ihrem Fall können Sie den HTML-Code mit der Direktive ng-bind-html wie folgt einfügen:

Wenn du das alles schon gemacht hast:

// My magic HTML string function.
function htmlString (str) {
    return "<h1>" + str + "</h1>";
}

function Ctrl ($scope) {
  var str = "HELLO!";
  $scope.htmlString = htmlString(str);
}
Ctrl.$inject = ["$scope"];

Dann könnten Sie in Ihrem HTML im Rahmen dieses Controllers

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

  • Danke! Das hat funktioniert. Einige Änderungen vorgenommen: Den Link korrigiert (SO hat ihn seltsam analysiert), “ng-bind-html” in “ng-bind-html-unsafe” geändert und ein vollständigeres Beispiel gegeben.

    – Herr Robert

    11. Februar 13 um 17:35 Uhr

  • Es ist ng-bind-html-unsafe bis 1.0.8, danach nur noch ng-bind-html weil die sicheren und unsicheren Funktionen zusammengeführt wurden github.com/angular/angular.js/blob/master/…

    – Matthew

    23. September 13 um 16:12 Uhr


  • @AakilFernandes, musste ich hinzufügen ngSanitize zu meinem Hauptmodul für ng-bind-html arbeiten.

    – igreulich

    02.03.15 um 21:02 Uhr

AngularJS Fugen Sie HTML aus einer Zeichenfolge ein
Java-Basketball

kannst du auch verwenden $sce.trustAsHtml('"<h1>" + str + "</h1>"'), Wenn Sie mehr Details wissen möchten, beziehen Sie sich bitte auf $sc

.

784170cookie-checkAngularJS: Fügen Sie HTML aus einer Zeichenfolge ein

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy