AngularJS에서 jQuery 셀렉터 사용하기

AngularJS는 jqLite라는 경량 jQuery를 내장하고 있습니다. 완전한 jQuery 기능이 필요할 때의 사용법과 주의사항을 알아봅니다.

1. angular.element 기본 사용

// jqLite 사용 (jQuery 없을 때)
var element = angular.element(document.querySelector(".myClass"));

// jQuery가 로드된 경우
var element = angular.element(".myClass");

// ID로 선택
var element = angular.element("#myId");

// 여러 요소 선택
var elements = angular.element("div.item");

2. jqLite vs jQuery

기능jqLitejQuery
addClass/removeClassOO
css()OO
attr()OO
find() - 태그만OO (전체)
셀렉터 문자열XO
animate()XO

3. 디렉티브에서 사용

app.directive("myDirective", function() {
  return {
    link: function(scope, element, attrs) {
      // element는 이미 jqLite/jQuery 객체
      element.addClass("active");
      element.on("click", function() {
        element.toggleClass("selected");
      });
      
      // 자식 요소 찾기
      var child = element.find("span");
      
      // 부모 요소
      var parent = element.parent();
    }
  };
});

4. 컨트롤러에서 사용 (비권장)

app.controller("MyCtrl", function($scope, $element) {
  // $element 주입 (권장하지 않음)
  
  // 대신 $timeout 사용
  $timeout(function() {
    var el = angular.element("#myElement");
    el.css("color", "red");
  });
});

5. jQuery 로드 순서

<!-- jQuery 먼저 로드해야 angular.element가 jQuery 사용 -->
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>

<!-- 확인 방법 -->
<script>
console.log(angular.element === jQuery); // true면 jQuery 사용 중
</script>

6. 이벤트 바인딩

// 이벤트 등록
element.on("click", handler);
element.on("mouseenter mouseleave", handler);

// 이벤트 제거
element.off("click", handler);
element.off(); // 모든 이벤트 제거

// 한 번만 실행
element.one("click", handler);

7. DOM 조작

// 내용 변경
element.html("<strong>새 내용</strong>");
element.text("텍스트만");

// 요소 추가
element.append("<div>추가</div>");
element.prepend("<div>앞에</div>");

// 요소 제거
element.remove();
element.empty(); // 자식만 제거

주의사항

  • 컨트롤러에서 직접 DOM 조작은 안티패턴
  • 가능하면 ng-class, ng-style 디렉티브 사용
  • 디렉티브의 link 함수에서 DOM 조작 권장
  • $digest 사이클 고려하여 $apply 필요 시 사용