Angular를 통해 html을 출력하는 방법JS 템플릿?
<h1>{{ revision.title }}</h1>
<div ng-bind-html="revision.content"></div>
제목은 출력은 괜찮지만 내용은 그렇지 않습니다.html이 포함되어 있고 다음 오류가 나타납니다.Attempting to use an unsafe value in a safe context.
http://docs.angularjs.org/error/$sce:unsafe 등입니다만, 컨텐츠에 html이 포함되어 있기 때문에, 어떻게 하면 컨텐츠를 출력할 수 있을까요?{{ revision.content | safe }}
또는 smthn.올바른 방법은 무엇입니까?
편집:
AngularJS 버전: 1.2
해결 방법은 다음과 같습니다.
포함하다angular-sanitize.min.js
http://code.angularjs.org/ 에서 입수하여 모듈에 포함시킵니다.
var app = angular.module('app', ['ngSanitize']);
그러면 자유롭게 사용할 수 있습니다.ng-bind-html
오래된 질문인 건 알지만, 다음 방법을 통해 가치를 신뢰할 수 있습니다.$sce
컨트롤러:
$scope.revision.content = $sce.trustAsHtml($scope.revision.content);
그 후로는ng-bind-html
효과가 있습니다.
작성했습니다.ng-html
와 같은 기본적인 일을 하는 지시ng-bind-html-unsafe
그랬었지.단, 주의해서 사용하는 것이 좋습니다.악의적인 공격에 쉽게 노출될 수 있습니다.구현하기 전에 무엇을 하고 있는지 알고 있어야 합니다.
.directive('ngHtml', ['$compile', function($compile) {
return function(scope, elem, attrs) {
if(attrs.ngHtml){
elem.html(scope.$eval(attrs.ngHtml));
$compile(elem.contents())(scope);
}
scope.$watch(attrs.ngHtml, function(newValue, oldValue) {
if (newValue && newValue !== oldValue) {
elem.html(newValue);
$compile(elem.contents())(scope);
}
});
};
}]);
그 다음, 다음과 같이 사용합니다.
<div ng-html="revision.content"></div>
도움이 됐으면 좋겠다.
어떤 버전을 사용하고 있습니까?1.2 미만을 사용하고 있는 경우는,ngBindHtmlUnsafe
공식 AngularJs Doc에 따르면 앱 종속성에 ngSanitize를 삽입해야 합니다.
식을 평가하고 결과 HTML을 안전한 방법으로 요소에 삽입합니다.기본적으로는 HTML 콘텐츠는 $sanitize 서비스를 사용하여 삭제됩니다.이 기능을 사용하려면 예를 들어 코어 Angular가 아닌 모듈의 의존관계에 ngSanitize를 포함하여 $sanitize를 사용할 수 있는지 확인하십시오.모듈의 의존관계에서 ngSanitize를 사용하려면 어플리케이션에 "angular-sanitize.js"를 포함해야 합니다.
그 후, 을 인스톨 할 수 있습니다.ngSanitize
모듈화 방법:
1 - 바우어 사용
bower install --save angular-sanitize
2 - npm 사용
npm install --save angular-sanitize
3 - 다운로드에 의한 수동angular-sanitize.js
@Xeen answer와 같은 버전 번호별로 모든 angularJS 파일 카테고리를 포함하는 code.angularjs.org 경로의 파일
인스톨의 상세한 것에 대하여는, 을 참조해 주세요.ngSanitize
모듈 Oficial angularJs github 저장소에서 angular-sanitize 설치용
언급URL : https://stackoverflow.com/questions/19770156/how-to-output-html-through-angularjs-template
'programing' 카테고리의 다른 글
ASP.Net MVC Ajax 폼과 jQuery 검증 (0) | 2023.03.18 |
---|---|
MongoDB mongore store 및 레코드가 있는 기존 컬렉션 (0) | 2023.03.18 |
REST API - 파일(이미지) 처리 - 베스트 프랙티스 (0) | 2023.03.18 |
Reactjs: HTML 템플릿을 다른 파일에 넣는 방법 (0) | 2023.03.18 |
'react-native start' 오류 해결 방법 (0) | 2023.03.18 |