예를 들어
$scope.text1 = '<h3>제목</h3>';
라고 있고 dom에서 {{text1}} 하면 바로 <h3>제목</h3>가 노출된다.
이를 html로 적용시키려면 아래와 같이 만들어야한다.
방법 1.
헤더에서 angular-sanitize 를 불러와준다.
<script src="/angular-1.5.8/angular-sanitize.min.js"></script>
모듈에 ngSaitize를 넣어준다.
var app = angular.module('모듈이름',['ngRoute','ngAnimate','ngSanitize'], function($httpProvider){ });
이제 준비가 되었다.
dom에는 아래와 같이 넣어준다.
<p ng-bind-html="text1"></p>
그럼 제대로 데이터가 html로 바인딩 된 것을 확인할 수 있다.
방법 2.
크게 다른건 없다.
조금 설정하는 방법이 다른 것일뿐이다.
역시 헤더에서 angular-sanitize 를 불러와준다.
<script src="/angular-1.5.8/angular-sanitize.min.js"></script>
이번에는 컨트롤쪽에서 노출하려는 데이터를 감싸주는 작업만 해주면 된다.
app.controller('컨트롤러이름', function($scope, $sce){ $scope.text1 = $sce.trustAsHtml('<h3>제목</h3>'); });
방법1과 같이 dom에는 아래와 같이 넣어준다.
<p ng-bind-html="text1"></p>
방법 1과 2는 용도에 따라 선택해서 쓰면 된다.
모듈 전체에 적용할지 컨트롤 안의 특정 데이터에만 적용할지 말이다.