programing

Angular를 통해 html을 출력하는 방법JS 템플릿?

skycolor 2023. 3. 18. 08:26
반응형

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.jshttp://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

반응형