序文
AngularJSの力の1つは、その強力なデータ双方向の結合機能です。よく使用する2つのことは、フォーム用のNg-bindとNg-Modelです。
しかし、私たちのプロジェクトでは、この状況に遭遇します。バックグラウンドで返されるデータには、さまざまなHTMLタグが含まれています。
のように:
$ scope.currentwork.description = "こんにちは、<br> <b>今日はどこに行きますか?</b>"
ng-bind-htmlなどの手順を使用してバインドしますが、結果は必要なものではありません。
それでおしまい
こんにちは、今日はどこに行きますか?
何をするか?
Angularバージョン1.2については、$ SCEサービスを使用して問題を解決する必要があります。いわゆるSCEは、「厳格な文脈的脱出」の略語です。中国語に翻訳されているのは「厳格なコンテキストモード」であり、安全な結合として理解することもできます。
使い方を見てみましょう。
コントローラーコード:
$ http.get( '/api/work/get?workid =' + $ routeparams.workid).success(function(work){$ scope.currentwork = work;});HTMLコード:
<p> {{currentWork.description}} </p>返すコンテンツには、一連のHTMLタグが含まれています。結果は、記事の冒頭で言ったように示されています。この時点で、安全にバインドするように指示する必要があります。 $ sce.trustAsHtml()を使用して実行できます。この方法は、値を特権の受け入れに変換し、「ng-bind-html」を安全に使用します。したがって、コントローラーに$ SCEサービスを紹介する必要があります
コントローラー( 'TransferWorkStep2'、['$ scope'、 '$ http'、 '$ routeparams'、 '$ sce'、function($ scope、$ http、$ routeparams、$ sce){$ http.get( '/api/work/get? work; $ scope.currentwork.description = $ sce.trustashtml($ rootscope.currentwork.description);});HTMLコード:
<p ng-bind-html = "currentWork.description"> </p>
この結果は、ページに完全に表示されます。
こんにちは、今日はどこに行きますか?
また、このように使用して、フィルターにカプセル化して、いつでもテンプレートで呼び出すこともできます。
app.filter( 'to_trusted'、['$ sce'、function($ sce){return function(text){return $ sce.trustashtml(text);};}];HTMLコード:
<p ng-bind-html = "currentWork.description | to_trusted"> </p>
要約します
上記は、AngularJSのNG-Bind-HTMLディレクティブと$ SCEサービスに関するものです。勉強や仕事に役立つことを願っています。ご質問がある場合は、メッセージを残してコミュニケーションをとることができます。