AngularJS での ng-bind-html ディレクティブの解析-htmlチュートリアル-php.cn

AngularJS での ng-bind-html ディレクティブの解析

怪我咯

リリース： 2017-04-30 10:55:40

オリジナル

1860 人が閲覧しました

ng-bind-html と ng-bind の違いは、ng-bind は値を文字列として受け取り、それを要素のコンテンツにバインドしますが、ng-bind-html は値を html として受け取り、それを要素のコンテンツにバインドすることです。要素の html。jq の .text() および .html() に相当します。この記事では、主に AngularJS の ng-bind-html ディレクティブの関連情報を詳しく紹介します。必要な方は参照してください。

はじめに

データを HTML タグにバインドするとき、バインドされたコンテンツがプレーンテキストの場合は、{{}} または ng-bind を使用できます。ただし、html タグを含むコンテンツを html タグにバインドする場合、angularjs はセキュリティ上の理由からコンテンツを html にレンダリングせず、テキストとしてページに直接表示します。

まず例を見てみましょう

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script src="js/angular.min.js"></script>
 <script>
 angular.module("myapp", []).controller("MyController", function ($scope) {
 $scope.content = "<h1>Hello world.</h1>";
 $scope.txt = "Hello txt world";
 });
 </script>
</head>
<body ng-app="myapp">
 <p ng-controller="MyController">
 {{content}}
 <p ng-bind="content"></p> 
 </p>
</body>
</html>

ログイン後にコピー

出力

ng-bind-htmlコマンド

 <p ng-bind-html="content"></p>

ログイン後にコピー

図に示すように、セキュリティエラーが発生します:

しかし、次のモジュールを導入することで、HTMLのコンテンツが安全かどうかを自動的に検出できます

 <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>

 <script>
 angular.module("myapp", ["ngSanitize"]).controller("MyController", function ($scope) {
 $scope.content = "<h1>Hello world.</h1>";
 $scope.txt = "Hello txt world";
 });
 </script>

ログイン後にコピー

この時点でプレビューを更新してください

つまり、

ng-bind -html コマンドが渡されるコンテンツを HTML 要素にバインドする安全な方法。

AngularJS でアプリケーション内に HTML を記述したい場合は、危険なコードを検出する必要があります。「angular-santize.js」モジュールをアプリケーションに導入することで、ngSanitize 関数を使用してコードのセキュリティを検出します。アプリケーションでは、ngSanitize 関数を通じて HTML コードを実行することでこれを行うことができます

もう 1 つの処理方法

は、カスタムフィルターを通じて HTML タグを含むコンテンツを安全なものとして扱うことです。

りー

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