web-dev-qa-db-ja.com

angularJSを使用してng-bind内のhtmlを解析します

AngularJsに問題があります。私のアプリケーションはサーバーにデータを要求し、サーバーから返されたデータの値の1つはhtmlの文字列です。 angularこのようなテンプレートでバインドしています

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

しかし、あなたが予想するように、私が見るのはアイコン画像ではなく、マークアップは基本的にdiv内のものです

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

それは私が欲しいものではありません。

誰でも私はトランスクルージョンでhtmlを解析するために何ができるか知っています

javascriptangularjshtml-parsing
38
Edgar Martinez

そのような目的でng-bind-htmlとng-bind-html-unsafeを使用したい場合。

例が示されています here

39
Tosh

Ng-bind-html-unsafeは推奨されないため、代わりにこのコードを使用できます。

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

$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 
});
18
Mher Aghabalyan

より良い方法は、$compileの代わりにng-bind-html-unsafeを使用することです。

参照： http://docs.angularjs.org/api/ng.$compile

最後に、現時点では、angularJSの最後のバージョン（リリース候補1.2.0）にはng-bind-html-unsafeディレクティブがありません。したがって、今後アプリを更新する前にこのオプションを検討することをお勧めします。 （ng-bind-html-unsafeは機能する可能性があります/機能しません...）

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

8
Pierre Broucz