Analyse de la directive ng-bind-html dans AngularJS-tutoriel HTML-php.cn

Analyse de la directive ng-bind-html dans AngularJS

怪我咯

Libérer： 2017-04-30 10:55:40

original

1859 Les gens l'ont consulté

La différence entre ng-bind-html et ng-bind est que ng-bind prend la valeur sous forme de chaîne et la lie au contenu de l'élément, mais ng-bind-html prend la valeur sous forme html et la lie au HTML de l'élément défini. Équivalent à .text() et .html() dans jq. Cet article vous donne principalement une introduction approfondie aux informations pertinentes de la directive ng-bind-html dans AngularJS. Les amis dans le besoin peuvent s'y référer.

Avant-propos

Lors de la liaison de données à des balises HTML, si le contenu lié est du texte brut, vous pouvez utiliser {{} } ou ng- lier. Mais lors de la liaison du contenu avec des balises HTML à des balises HTML, Angularjs ne le restituera pas en HTML pour des raisons de sécurité, mais l'affichera directement sur la page sous forme de texte.

Regardons d'abord un exemple

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

Copier après la connexion

Sortie

Commande ng-bind-html

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

Copier après la connexion

La sécurité apparaîtra à ce moment Erreur, comme le montre l'image :

Mais vous pouvez détecter automatiquement si le contenu HTML est sûr en introduisant le module suivant

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

Copier après la connexion

Actualiser l'aperçu à ce moment

Donc le

ng-bind- La commande html est un moyen sûr de lier le contenu aux éléments HTML.

Lorsque vous souhaitez qu'AngularJS écrive du HTML dans votre application, vous devez détecter un code dangereux. En introduisant le module "angular-santize.js" dans votre application, utilisez la fonction ngSanitize pour détecter la sécurité de votre code. dans votre application, vous pouvez le faire en exécutant le code HTML via la fonction ngSanitize.

Une autre façon de le gérer consiste à utiliser un filtrage personnalisé. Le processeur traite le contenu avec des balises html comme sûr.

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!