웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > angularjs

AngularJS에서 ng-bind-html로 html 문서 출력하는방법

Last Modified : 2017-12-16 / Created : 2017-08-14
12,211
View Count

AngularJS에서 html 코드를 html 파일에서 출력하는 방법을 알아봅니다.

! HTML출력시 sanitize를 사용하는 이유는?

AngularJS에서 html을 출력하려면 sanitize를 거쳐야 가능합니다. 그렇지 않으면 html 태그가 적용되지 않고 그대로 화면에 출력만 될 수 있습니다. 이를 위해서 아래와 같이 $sce 서비스와 trustAsHtml() 메소드를 사용하여야합니다. 아래 예제는 이를 사용하여 html을 ng-bind-html을 사용하여 출력하는 예제입니다.


# AngularJS의 $sce 그리고 ng-bind-html 예제보기

div 태그내의 span 태그는 html 코드를 출력하여 보여주려는 간단한 예제입니다. 변수 trustedHtml에 보여줄 html 코드를 추가하여 이를 ng-bind-html을 사용하여 출력해보겠습니다.
@ ngbind.html
<div>
  <span ng-bind-html="trustedHtml"></span>
</div>

이제 위 html에 trustedHtml을 출력하기 위하여 아래의 AngularJS 코드를 작성합니다.
@ ngbind.js
myApp = angular.module('myApp', []);
myApp.controller(function($sce, $scope) {
  var myHtml = '<span>Test trusted html</span>';
  // myHTML 변수에 html 태그에 저장하여 출력

  $scope.trustedHtml = $sce.trustAsHtml(myHtml);
});

변수 trustedHtml에 출력 가능한 html 코드를 추가 후 ng-bind-html을 사용하여 정상적으로 출력한 예제입니다. 앞에도 언급했지만 만약 위 과정을 거치지 않고 바로 ng-bind-html만 사용하는 경우 태그가 그대로 노출되게됩니다.
code snippet widget

아래의 글도 찾고 계시지 않나요?

    Previous

    AngularJS에서 AJAX를 불러온 후 코드를 실행하는 방법

    Previous

    AngularJS Routing, 라우팅 관련 이벤트 알아보기