Maison > Article > interface Web > Analyse de la directive ng-bind-html dans AngularJS
Analyse de la directive ng-bind-html dans AngularJS
- 怪我咯original
- 2017-04-30 10:55:401857parcourir
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>
Sortie
Commande ng-bind-html
<p ng-bind-html="content"></p>
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>
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!