AngularJS_AngularJS で HTML フラグメントのエスケープをキャンセルする方法の例

今日は、JSON 形式でデータを提供するバックエンドとして Rails を使用し、JSON データを処理するフロントエンドとして AngularJS を使用してみました。data-ng-bind を直接使用すると、AngularJS が取得するのは HTML テキストです。エスケープを解除するには data-ng-bind-html を使用します。

ただし、data-ng-bind-html を直接使用すると、エラーが表示されます

コードをコピー コードは次のとおりです:

エラー: [$sce:unsafe] 安全なコンテキストで安全でない値を使用しようとしています。

HTML フラグメントは、data-ng-bind-html="html_in_string" を使用してエスケープを解除する前に、$sce.trustAsHtml(html_in_string) を使用して信頼できるものとしてマークする必要があります。

Angular が API またはここを通じて取得するすべての記事のうち、各記事には、Markdown または Org によってレンダリングされた HTML フラグメントである html_body 属性があります。

API を通じて JSON データを取得した後、AngularJS が提供する angular.forEach メソッドを使用して各投稿の html_body をマークし、結果を TrustedBody として保存し、HTML .trustedBody で data-ng-bind-html="post を使用します。 " はエスケープできません。

AngularJS 部分

コードをコピー コードは次のとおりです:

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

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

$scope.syncPosts();
});

HTML部分

コードをコピー コードは次のとおりです: