Beispiel dafür, wie das Escapen von HTML-Fragmenten in AngularJS_AngularJS abgebrochen wird

Heute habe ich versucht, Rails als Backend für die Bereitstellung von Daten im JSON-Format und AngularJS als Frontend für die Verarbeitung von JSON-Daten zu verwenden. Wenn Sie data-ng-bind direkt verwenden, erhalten Sie es wird maskiert. Verwenden Sie data-ng-bind-html, um die Escape-Funktion aufzuheben.

Aber wenn Sie data-ng-bind-html direkt verwenden, wird ein Fehler angezeigt

Code kopieren Der Code lautet wie folgt:

Fehler: [$sce:unsafe] Versuch, einen unsicheren Wert in einem sicheren Kontext zu verwenden.

HTML-Fragmente müssen mit $sce.trustAsHtml(html_in_string) als vertrauenswürdig markiert werden, bevor ihre Escapezeichen mit data-ng-bind-html="html_in_string" aufgehoben werden können.

Unter allen Artikeln, die Angular über die API oder hier abruft, verfügt jeder Artikel über ein html_body-Attribut, bei dem es sich um ein von Markdown oder Org gerendertes HTML-Fragment handelt.

Nachdem Sie JSON-Daten über die API abgerufen haben, verwenden Sie die von AngularJS bereitgestellte Methode „angular.forEach“, um den html_body jedes Beitrags zu markieren, speichern Sie das Ergebnis als „trustedBody“ und verwenden Sie dann „data-ng-bind-html="post“ in HTML .trustedBody „ kann entkommen sein.

AngularJS-Teil

Code kopieren Der Code lautet wie folgt:

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

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

$scope.syncPosts();
});

HTML-Teil

Code kopieren Der Code lautet wie folgt: