Explication détaillée de la directive ng-bind-html d'angularJS

Cette fois, je vais vous apporter une explication détaillée de l'instruction ng-bind-html de angularJS Quelles sont les précautions lors de l'utilisation de l'instruction ng-bind-html d'angularJS. . Ce qui suit est un cas pratique, jetons un coup d'œil.

L'une des fonctionnalités puissantes d'angular js est sa fonction de liaison de données bidirectionnelle. Deux éléments que nous utilisons souvent sont ng-bind et ng-model pour les formulaires. Mais nous rencontrerons une telle situation dans nos projets. Les données renvoyées par l'arrière-plan contiennent diverses balises html. Par exemple :

$scope.text = “hello,<br><b> 这是一个例子</b>”

Nous utilisons des instructions telles que ng-bind-html pour effectuer la liaison, mais le résultat n'est pas celui que nous souhaitons. Cela ressemble à ceci :
Bonjour, ceci est un exemple (le style de balise b que nous avons défini pour le texte est perdu)

Après un long débogage, j'ai finalement verrouillé le problème et l'ai résolu. , mais le travail acharné en vaut toujours la peine, après tout, je dois apprendre davantage de code pour comprendre cela.

La raison est la suivante :

angularJS affichera le texte sous forme de texte par défaut lors de l'exécution de la liaison de données, c'est-à-dire que les balises html de vos données seront ne pas être traité. Tous les échappements sont acceptés, ce qui améliore la sécurité et empêche les attaques par injection dans les balises html. Cependant, si notre scénario d'application est similaire à la page de détails de l'article, lorsque le texte formaté est lu depuis la base de données, il ne peut pas être affiché normalement sur la page. Comme suit :

$scope.htmlStr = &#39;<p style="color:red;font-size=18px;"></p>&#39;;

À ce stade, nous devons utiliser le service $sce pour résoudre notre problème. Ce qu'on appelle sce est l'abréviation de « Strict Contextual Escapeping ». Traduit en chinois, cela signifie « mode contextuel strict », qui peut également être compris comme une liaison sécurisée. Cette méthode convertit la valeur en une valeur acceptée par le privilège et peut être liée en toute sécurité à l'aide de "ng-bind-html".
Voyons comment l'utiliser :

Encapsulez-le dans un filtre et vous pourrez l'appeler sur le modèle à tout moment

//注册一个过滤器，挂载到任意一个angular.module下，如果自定义过滤器较多，可以提取出来一个公用的过滤器module
    .filter('to_trusted', ['$sce', function ($sce) {        return function (text) {            return $sce.trustAsHtml(text);
        };
    }]);//然后在页面中这样使用<p ng-bind-html="article.text | to_trusted"></p>

$sce est angulaireJS Le module de traitement de sécurité intégré, la méthode $sce.trustAsHtml(input) analyse et renvoie le contenu des données sous forme de HTML. L'ajout de ce filtre aux données liées par ng-bind-html permet l'échappement automatique des balises html lorsque les données sont chargées.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Outil de gestion d'interface WEB

Que dois-je faire si le texte de l'application ionique ne peut pas être appuyé longuement pour copier ou coller

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!