html - AngularJS: 文字列から HTML を挿入する

Question

私はこれについてたくさん調べましたが、答えが見つからないか、理解できません。特定の例が投票に勝ちます =)

• HTML文字列を返す関数があります。
• 機能を変更することはできません。
• 文字列で表されるhtmlをDOMに挿入したい。
• コントローラー、ディレクティブ、サービス、またはその他の機能するものを喜んで使用します (そして、合理的に良い習慣です)。
• 免責事項: $compile がよくわかりません。

これが私が試したことです：

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

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

それはうまくいきませんでした。

私もディレクティブとして試しました：

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

ヘルプ？

ノート

とりわけこれらを見ましたが、機能させることができませんでした。

• AngularJS : ビューに HTML を挿入する
• AngularJS $http HTML パーサー
• angularjs - $compile-d html の挿入
• document.write() で挿入された HTML で AngularJS が実行されない
• AngularJS ディレクティブで HTML テキストをエスケープする

Answer 1

このリンクの例を見てください:

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

基本的に、Angular には html をページに挿入するディレクティブがあります。あなたの場合、次のように ng-bind-html ディレクティブを使用して html を挿入できます。

すでにこれをすべて行っている場合：

// 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"];

次に、そのコントローラーのスコープ内のhtmlで、次のことができます

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

Answer 2

も使用できます$sce.trustAsHtml('"<h1>" + str + "</h1>"')。詳細については、$sceを参照してください。