ホームページ > 記事 > ウェブフロントエンド > angularJSのng-bind-htmlディレクティブの詳しい説明
今回は angularJS の ng-bind-html ディレクティブについて詳しく説明します、angularJS の ng-bind-html ディレクティブを使用する際の 注意事項 について説明します。以下は実際的なケースです。一見。
angular js の強力な機能の 1 つは、双方向のデータ バインディング機能です。私たちがよく使用する 2 つは、フォームの ng-bind と ng-model です。しかし、私たちのプロジェクトでは、バックグラウンドで返されるデータにさまざまなhtml タグ が含まれる場合があります。例:
$scope.text = “hello,<br><b> 这是一个例子</b>”ng-bind-html のような命令を使用してバインドしますが、結果は期待どおりではありません。それは次のようなものです:
こんにちは、これは例です (テキストに設定した b タグ スタイルが失われます)
$scope.htmlStr = '<p style="color:red;font-size=18px;"></p>';現時点では、問題を解決するには $sce サービスを使用する必要があります。いわゆるsceとは「Strict Contextual Escaping」の略です。中国語に翻訳すると「厳密なコンテキスト モード」となり、安全なバインディングとしても理解できます。このメソッドは、値を特権によって受け入れられ、「ng-bind-html」を使用して安全にバインドできる値に変換します。
使用方法を見てみましょう:
filter にカプセル化すると、いつでもテンプレート上で呼び出すことができます
//注册一个过滤器,挂载到任意一个angular.module下,如果自定义过滤器较多,可以提取出来一个公用的过滤器module .filter('to_trusted', ['$sce', function ($sce) { return function (text) { return $sce.trustAsHtml(text); }; }]);//然后在页面中这样使用<p ng-bind-html="article.text | to_trusted"></p>$sce は angularJS に付属するセキュリティ処理モジュールであり、$sce.trustAsHtml( input)メソッドが便利 データ内容が解析されてhtml形式で返されます。このフィルターを ng-bind-html にバインドされたデータに追加すると、データのロード時に HTML タグを自動的にエスケープできるようになります。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 関連記事:
ionicアプリケーションのテキストを長押しでコピー&ペーストできない場合の対処方法
以上がangularJSのng-bind-htmlディレクティブの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。