angularJSのng-bind-htmlディレクティブの詳しい説明-htmlチュートリアル-php.cn

angularJSのng-bind-htmlディレクティブの詳しい説明

php中世界最好的语言

リリース： 2018-03-08 10:21:39

オリジナル

2072 人が閲覧しました

今回は 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(&#39;to_trusted&#39;, [&#39;$sce&#39;, 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 サイトの他の関連記事を参照してください。