Comment restituer en toute sécurité des fragments HTML dans les vues AngularJS ?

Insérer des fragments HTML dans la vue à partir du contrôleur AngularJS

Dans AngularJS, il est possible de créer des fragments HTML dans le contrôleur et de les rendre dans la vue. Cela peut être utile pour générer dynamiquement des listes ou d'autres éléments d'interface utilisateur complexes.

Pour y parvenir, créez d'abord une propriété de modèle pour contenir le fragment HTML. Dans l'exemple ci-dessous, nous créons une propriété « customHtml » :

var SomeController = function () {
    this.customHtml = '<ul><li>render me please</li></ul>';
}

Ensuite, utilisez la directive ng-bind-html dans la vue pour lier la propriété customHtml à un élément :

<div ng-bind-html="customHtml"></div>

Cependant, AngularJS affichera le code HTML sous forme de chaîne entre guillemets, car il le considère comme dangereux à des fins de nettoyage. Pour résoudre ce problème, vous pouvez soit utiliser le service $sce, soit inclure le module ngSanitize.

Utiliser $sce

Tout d'abord, injectez le service $sce dans le contrôleur :

app.controller('SomeController', function($sce) {
    // ...
});

Ensuite, utilisez la méthode $sce.trustAsHtml() pour convertir la chaîne HTML en un fichier sécurisé format :

this.customHtml = $sce.trustAsHtml(someHtmlVar);

Utilisation de ngSanitize

Pour utiliser ngSanitize, incluez d'abord le script angulaire-sanitize.min.js :

<script src="lib/angular/angular-sanitize.min.js"></script>

Ensuite, incluez ngSanitize comme dépendance dans votre AngularJS module :

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

Avec ngSanitize, vous pouvez directement attribuer la chaîne HTML à la propriété du modèle :

this.customHtml = someHtmlVar;

Les deux méthodes vous permettent de générer et de restituer dynamiquement des fragments HTML dans la vue, offrant une plus grande flexibilité dans vos applications AngularJS.

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!