web-dev-qa-db-ja.com

ng-bind-htmlは入力タグでは機能しません

HTMLをスコープ変数内に格納してからテンプレートビューで使用しようとしています。これを角度で行う方法を読んでいたときに、ng-bind-htmlに出くわしました。その中で、htmlタグを<a>、<strong>などでバインドすると機能することに気づきました。しかし、<input>タグを追加できません。

意味、これは機能します：

$scope.myHtml = '<strong>This is <a hreaf="#">Something</a></strong>';

テンプレート：

<p ng-bind-html="myHtml"> </p>

しかしこれは機能しません：

$scope.myHtml = '<input type="text" />';

テンプレート：

<p ng-bind-html="myHtml"> </p>

上記は、デモンストレーションのみを目的とした単純化されたサンプルです。私の質問は：

1）タグはng-bind-htmlディレクティブでは機能しませんか？

2）そうでない場合、ビュー内に挿入できるように入力タグをhtmlバインドするにはどうすればよいですか？

javascriptangularjsng-bind-htmlng-bindngsanitize
14
Neel

$ sce：unsafeエラーが発生しています...

つまり、_ng-bind-html-unsafe_を使用する必要がありますが、angularjsの新しいバージョンにはこのディレクティブが含まれていないため、次のように$ sce.trustAsHtml()を使用する必要があります...

_$scope.trustedInputHtml = $sce.trustAsHtml('<input type="text" />');
_

ただし、この方法ではスコープ変数をhtmlにバインドできないため、_ng-bind-html-unsafe_ ..に置き換えることができるディレクティブを作成するのが最善の方法です。

ここで動作しています [〜＃〜] plunker [〜＃〜] $ sceとディレクティブの両方の例で...

30
Poyraz Yilmaz

挿入したものは独自のテンプレートに保持し、ng-include（ http://docs.angularjs.org/api/ng/directive/ngInclude ）を使用します。

angularテンプレート（template.html）とその内容：

<strong>This is <a href="#">Something</a></strong>

あなたはそれを含めることができます

<p ng-include="template.html"></p>

これは次のようなsthになります

<p ng-include="template.html"><span class="ng-scope"><strong>This is <a href="#">Something</a></strong></span></p>
2
ranzwertig

Angularは、特定のHTMLタグをng-bind-htmlで選択的にサニタイズします。

したがって、すべてのタグが必要な場合は、代わりにng-bind-html-unsafeを使用する必要があります

しかし、XSS攻撃に注意してください！

ところで

@EdHinchliffeのアドバイスに従う方がはるかに良いです

1
Whisher