AngularJS: Fügen Sie HTML aus einer Zeichenfolge ein

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 eine HTML-Zeichenfolge 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 Direktive, einen Dienst oder etwas anderes, das funktioniert (und eine vernünftige Vorgehensweise 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?

Hinweis

Ich habe mir unter anderem diese angesehen, konnte sie 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

Schauen Sie sich das Beispiel in diesem Link an:

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

Grundsätzlich hat Angular eine Anweisung, HTML in Seiten einzufügen. In Ihrem Fall können Sie den HTML-Code mit der Direktive ng-bind-html wie folgt einfügen:

Wenn Sie dies alles bereits getan haben:

// 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>

Sie können auch ， verwenden $sce.trustAsHtml('"<h1>" + str + "</h1>"'). Wenn Sie weitere Informationen benötigen, lesen Sie bitte $ sce