AngularJS_AngularJS에서 HTML 조각 이스케이프를 취소하는 방법의 예

오늘은 JSON 형식으로 데이터를 제공하기 위해 Rails를 백엔드로 사용하고, JSON 데이터를 처리하기 위해 AngularJS를 프론트엔드로 사용해 보았습니다. data-ng-bind를 직접 사용하면 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', 함수 ($scope, $http, $sce) {
$scope.posts = [];

$scope.syncPosts = 함수 () {
var 요청 = $http.get('http://localhost:3000/posts.json');
request.success(함수(응답) {
$scope.posts = angle.forEach(angular.fromJson(응답), 함수(포스트) {
         post.trustedBody = $sce.trustAsHtml(post.html_body);
});
});
};

$scope.syncPosts();
});

HTML 부분

코드 복사 코드는 다음과 같습니다.