web-dev-qa-db-ja.com

AngularJS：文字列からHTMLを挿入

私はこのためにたくさん見ましたが、答えを見つけることができないか、それを理解していません。特定の例が投票に勝ちます=）

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

助けて？

注

とりわけこれらを見てみましたが、うまくいきませんでした。

htmlstringangularjs
73
Sir Robert

このリンクの例をご覧ください。

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

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

15
Dang