Maison >interface Web >js tutoriel >Compréhension approfondie du code graphique de la directive ng-bind-html dans AngularJS

Compréhension approfondie du code graphique de la directive ng-bind-html dans AngularJS

黄舟original: 2017-03-28 14:58:071397parcourir

La différence entre ng-bind-html et ng-bind est que ng-bind prend la valeur La chaîne est liée au contenu de l'élément, mais ng-bind-html prend la valeur au format html et la lie au html de l'élément. C'est équivalent à .text() et .html() dans jq. Cet article vous donne principalement une introduction détaillée aux informations pertinentes de la directive ng-bind-html dans AngularJS. Les amis qui en ont besoin peuvent se référer à

. Avant-propos<.>

Lors de la liaison de données à la

balise HTML, si le contenu lié est du texte brut, vous pouvez utiliser {{}} ou ng-bind . Mais lors de la liaison de la balise html. Lors de la liaison du contenu avec des balises html, Angularjs ne le rendra pas en HTML pour des raisons de sécurité, mais l'affichera directement sur la page sous forme de texte. exemple d'abord

Sortie

<!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>

commande ng-bind-html

Compréhension approfondie du code graphique de la directive ng-bind-html dans AngularJS

À ce moment, une erreur de sécurité se produira, comme le montre la figure :

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

Mais vous pouvez détecter automatiquement le contenu du HTML en introduisant le module suivant Is est-il sûr ?

Compréhension approfondie du code graphique de la directive ng-bind-html dans AngularJS Actualisez l'aperçu à ce moment-là

 <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>

Donc le

Compréhension approfondie du code graphique de la directive ng-bind-html dans AngularJS

ng-bind La commande -html permet de lier le contenu aux éléments HTML de manière sûre

Lorsque vous souhaitez qu'AngularJS écrive du HTML dans votre application, vous devez détecter un code dangereux en introduisant "angular" dans votre application -santize. js", utilisez la fonction

de ngSanitize pour détecter la sécurité du code. Dans votre application, vous pouvez le faire en exécutant le code HTML via la fonction ngSanitize.

Une autre façon de traiter

consiste à traiter le contenu avec des balises HTML comme sûr en personnalisant le filtre

Résumé<.>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction détaillée à l'utilisation de l'image node.js de NPM Taobao pour accélérer NVMArticle suivant：Introduction détaillée à l'utilisation de l'image node.js de NPM Taobao pour accélérer NVM

Articles Liés

Voir plus