html tag가 포함된 문자열을 bind 하는 경우 화면상에 문자가 아닌 태그로 적용되게 하려면
ng-bind-html을 사용하면 된다.
다만 ng-bind-html을 사용하려면 몇가지 작업을 해주어야 한다.
1. sanitize.js 파일을 추가 시켜 줘야 한다.
angular.js 다음에 불러올 수 있게 한다.
cdn : <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.js"></script>
2. angular module에 추가
var module = angular.module('ngApp', ['ngSanitize']);
module.controller("Ctrl",function($scope,$http,$window,$timeout) {
.
.
.
.
});
위 두가지 작업을 해주면 ng-bind-html 태그를 사용 할 수 있다.
예제
controller
$scope.myHTML = 'I am an <code>HTML</code>string with ' +
'<a href="#">links!</a> and other <em>stuff</em>';
html
<div ng-bind-html="myHTML"></div>
위와 같이 작성하면 div에 myHTML 내용이 태그가 적용 되어 출력된다.
데모 :: http://trandent.com/jsTest/12614201488610
