Maison > interface Web > js tutoriel > Exemple de comment annuler l'échappement de fragments HTML dans AngularJS_AngularJS

Exemple de comment annuler l'échappement de fragments HTML dans AngularJS_AngularJS

WBOY
Libérer: 2016-05-16 16:22:22
original
1158 Les gens l'ont consulté

Aujourd'hui, j'ai essayé d'utiliser Rails comme backend pour fournir des données au format JSON et AngularJS comme frontend pour traiter les données JSON. Ce qu'AngularJS obtient, c'est un morceau de texte HTML. sera échappé. Utilisez data-ng-bind-html pour annuler l'échappement.

Mais si vous utilisez directement data-ng-bind-html, une erreur sera affichée

Copier le code Le code est le suivant :

Erreur : [$sce:unsafe] Tentative d'utilisation d'une valeur non sécurisée dans un contexte sécurisé.

Les fragments HTML doivent être marqués comme approuvés à l'aide de $sce.trustAsHtml(html_in_string) avant de pouvoir être récupérés à l'aide de data-ng-bind-html="html_in_string".

Parmi tous les articles qu'Angular récupère via l'API ou ici, chaque article possède un attribut html_body qui est un fragment HTML rendu par Markdown ou Org.

Après avoir obtenu les données JSON via l'API, utilisez la méthode angulaire.forEach fournie par AngularJS pour marquer le html_body de chaque publication, enregistrez le résultat sous trustBody, puis utilisez data-ng-bind-html="post in HTML .trustedBody " peut être échappé.

Partie AngularJS

Copier le code Le code est le suivant :

Blog.controller('PostsController', fonction ($scope, $http, $sce) {
$scope.posts = [];

$scope.syncPosts = fonction () {
var request = $http.get('http://localhost:3000/posts.json');
request.success (fonction (réponse) {
$scope.posts = angulaire.forEach(angular.fromJson(response), fonction (post) {
         post.trustedBody = $sce.trustAsHtml(post.html_body);
});
});
};

$scope.syncPosts();
});


Partie HTML
Copier le code Le code est le suivant :


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal