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

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 :