[Angular JS] 동적 요소 바인딩 (angularjs dynamic element binding)

Angular JS

Angular JS 동적 요소 바인딩 (angularjs dynamic element binding)

프론트엔드 프레임워크 중 하나인 Angular JS(앵귤러 제이에스)를 사용하다 보면 가끔 jQuery(제이쿼리)에서 사용하듯이 DOM을 동적으로 붙여주고 싶을 때가 있다.

이 때 단순히 angularjs 안의 내장되어있는 jqlite를 통해서 clone() 함수로 html을 복사한 후에 append() 함수나 after()함수로 붙여준다면 그 안에 바인딩 되어 있는 이벤트들은 동작하지 않을 것이다.

그럴 때 다음과 같이 $compile을 활용하면 된다.

var prod_el = angular.element('#set_product_row');
var clone_el = prod_el.clone();    // 복사된 html
        
// 동적으로 append한 html요소에 ng-click 등 함수 바인딩을 위해 $compile 수행후에 append
prod_el.after($compile(clone_el)($scope));

이렇게 하면 clone하여 붙인 영역도 이벤트 바인딩이 되어 정상적인 동작이 된다.

---

HTML 요소 태그 적용하여 바인딩

app.filter('trustAsHtml', ['$sce', function($sce) {
    return function(text) {
        return $sce.trustAsHtml(text);
    }
}]);