web-dev-qa-db-ja.com

AngularJSで生のHTMLをレンダリングする方法は？

AngularJSシングルページアプリケーションを作成しています。データは、Webサービスからjson形式でフェッチされます。

問題は、一部のテキスト要素にフォーマット済みのhtmlタグが付属していることです。

json出力：

{
   "text": "<p><span style="text-decoration: underline;"><strong>test text</string></span></p>"
}

ここで、このテキストを表示してhtmlを直接レンダリングし、「テスト」のみがユーザーに表示され、残りがマークアップとして機能するようにするにはどうすればよいですか？

<h1>{{data.text}}</h1>
javascripthtmljsonangularjsng-bind-html
11
membersound

H1タグにng-bind-html="data.text"を追加する必要があります。

HTMLは次のようになります。

<h1 ng-bind-html="data.text"></h1>

ドキュメント： ngBindHtml

16
mhx

Update2：htmlを削除することは可能ですか？そうすることができます：

angular.module('myApp.filters', []).
   filter('htmlToPlaintext', function() {
      return function(text) {
         return String(text).replace(/<[^>]+>/gm, '');
      };
   }
);

そしてあなたはhtml：

<div>{{myText | htmlToPlaintext}}</div>

詳細情報を参照してください： htmlの代わりにプレーンテキストを出力するangularjs

更新：jsonからのhtmlが本当に必要ですか？ビューにhtmlを保存し、jsonからデータを取得することをお勧めします。優れた分離と非常に使いやすい。

それは可能ですが、非html（優れたセキュリティ）ほど簡単ではありません。

Angular 1.3では、次のように必要です。

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

コントローラにこれを追加します：

$scope.htmlBind = $sce.trustAsHtml('<span>Hi, I am <em>Joe</em>');

説明：$ sceが表示されます：

$ sceは、AngularJSに厳密なコンテキストエスケープサービスを提供するサービスです。

trustAs（type、value）

$ sceDelegate.trustAsへのデリゲート。そのため、指定された厳密なコンテキストエスケープコンテキスト（ng-bind-html、ng-include、任意のsrc属性補間、任意のdomイベントバインディングなど）で使用するためにangularによって信頼されるオブジェクトを返します提供された値を使用するonclickなどの属性補間）。厳密なコンテキストエスケープを有効にするには、* $ sceを参照してください。

詳細はこちら：

5
schellingerht