스코프 데이터 html로 바인딩하기

예를 들어

$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는 용도에 따라 선택해서 쓰면 된다.

모듈 전체에 적용할지 컨트롤 안의 특정 데이터에만 적용할지 말이다.

TOP