2013-02-15 3 views
34

私はangularJsに問題があります。私のアプリケーションはサーバーから何らかのデータを要求し、サーバーから返されたデータの値の1つはhtmlの文字列です。私はこのangularJSを使用してng-bind内のhtmlを解析します

<div>{{{item.location_icons}}</div> 

ように私の角度テンプレートでそれを結合していますが、あなたは私が何を参照してください期待通りにすると、アイコン画像ではなく、マークアップ は、基本的にはdivの中のものが

"<i class='my-icon-class'/>" 

ているように見えます私が望むものではありません。

誰もが、私はあなたが目的のようなもののためにng-bind-htmlng-bind-html-unsafeを使用するトランスクルー

答えて

36

でHTMLを解析するために何ができるか知っています。

実施例は、より良い方法は$compile代わりにng-bind-html-unsafeを使用することであるhere

+0

どうすればng-bind-htmlでこれを使用できますか?ng-bind-unsafe-htmlをどのように使うことができるかは安全でないかどうかは分かりません。物事をする。 ng-bind-htmlについて詳しく説明できますか?角度のある文書はこれではあまり明確ではありません。私はそれを使用しようとしたが動作しませんでした –

+1

正直なところ、私は正確には分かりません。しかし、私の理解では、サニタイザは 'href'、' src'などの外部参照を持つタグを削除することになります。もしあなたがユーザ入力をバインドしているなら、安全ではないかもしれませんが、あなた自身の内部値、私はそれが浄化されていないバージョンを使用することは問題ないと思います。 – Tosh

+10

'ng-bind-html'は' ngSanitize'モジュールにあります。これは、 'ngResource'のようにAngularであらかじめパッケージ化されていません。スクリプトをインクルードし、アプリがそれに依存していることを確認する必要があります: 'var app = angular.module( 'app'、['ngSanitize']);'。あなたは 'ng-bind-html'指令にアクセスすることができます。これは次のように使用できます:'

' – satchmorun

8

示されています。

参照:現時点でhttp://docs.angularjs.org/api/ng.$compile

最後に、angularJSの最後のバージョン(リリース候補1.2.0)どんなng-bind-html-unsafeディレクティブを持っていません。アプリの今後のアップデートを行う前にこのオプションを検討することをお勧めします。 NG-バインド-HTML-安全ではないとして(ng-bind-html-unsafeは/もはや動作していないだろうことがあります...)

http://code.angularjs.org/1.2.0rc1/docs/api/ng.directive:ngBindHtml

+0

あなたは[$ sanitize](http://docs.angularjs。org/api/ngSanitize。$ sanitize)ではなく、$ compile? –

16

は廃止され、代わりにこのコードを使用することができます。

あなたはあなたのコントローラ内の関数を作成する必要があります。

$scope.toTrustedHTML = function(html){ 
    return $sce.trustAsHtml(html); 
} 

とあなたのビューでこのようなものを使用します。

<span ng-bind-html='toTrustedHTML(myHTMLstring)'></span> 

は$のSCEを注入することを忘れないでください:

AppObj.controller('MyController', function($scope, $sce) { 
    //your code here 
}); 
関連する問題