angularjs html 삽입하기 append html

북마크 추가

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

 

 

 

 

 

HKH
2014-10-16 12:09
SHARE
keyboard_arrow_left
keyboard_arrow_up