ホームページ >ウェブフロントエンド >jsチュートリアル >AngularJS の ng-bind-html ディレクティブのグラフィック コードの深い理解

AngularJS の ng-bind-html ディレクティブのグラフィック コードの深い理解

黄舟
黄舟オリジナル
2017-03-28 14:58:071325ブラウズ

ng-bind-html と ng-bind の違いは、ng-bind は値を 文字列 として受け取ることです。 element はコンテンツをバインドしますが、ng-bind-html は値を html として受け取り、それを要素の html にバインドします。この記事では主に AngularJS の ng-bind-html ディレクティブについて詳しく説明します。 、必要な友達はそれを参照してください

前書き

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

出力の例を見てみましょう。

ng-bind-html コマンドAngularJS の ng-bind-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>

このとき、図に示すようにセキュリティ エラーが表示されます:

しかし、HTML コンテンツが安全かどうかを自動的に検出するには、次のモジュール

 <p ng-bind-html="content"></p>
AngularJS の ng-bind-html ディレクティブのグラフィック コードの深い理解この時点でプレビューを更新してください

したがって、AngularJS でコンテンツをターゲットにバインドするには、AngularJS の ng-bind-html ディレクティブのグラフィック コードの深い理解

ng-bind-html コマンドを使用するのが安全な方法です。アプリケーションに HTML を記述するには、「angular-santize.js」モジュールをアプリケーションに導入し、ngSanitize 関数を使用して、危険なコードを検出する必要があります。アプリケーション内のコードのセキュリティを検出するには、次のコマンドを実行します。 ngSanitize 関数を使用して HTML コードを処理します。

これを処理する別の方法は、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>

概要

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。