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

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>

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