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 タグ スタイルが失われます)

長時間デバッグした後、最終的に問題をロックして解決しました。しかし、結局のところ、これを理解するにはさらに多くのコードを学習する必要があるため、苦労する価値はまだあります。

その理由は次のとおりです。

angularJS は、

データ バインディング を実行するときにデフォルトでテキスト形式で出力します。つまり、データ内のすべての HTML タグがエスケープせずに受け入れられるため、セキュリティが向上し、インジェクション攻撃が防止されます。 htmlタグで。ただし、アプリケーションのシナリオが記事の詳細ページに似ている場合、書式設定されたテキストがデータベースから読み取られると、ページに正常に表示できません。以下のように:

$scope.htmlStr = &#39;<p style="color:red;font-size=18px;"></p>&#39;;

現時点では、問題を解決するには $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 サイトの他の関連記事に注目してください。

関連記事:

WEBインターフェース管理ツール

ionicアプリケーションのテキストを長押しでコピー＆ペーストできない場合の対処方法

以上がangularJSのng-bind-htmlディレクティブの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。