AngularJS 디렉티브 사용법 및 예제
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

AngularJS에서 디렉티브 사용법과 예제

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • 대상자: AngularJS를 사용하는 웹 개발자
  • 난이도: 중급~고급(기본 개념 이해 및 커스텀 디렉티브 작성 경험 필요)

핵심 요약

  • 디렉티브는 HTML에 커스텀 동작을 추가하는 AngularJS의 핵심 기능으로, ng-model, ng-repeat사전 정의된 디렉티브커스텀 디렉티브로 구성
  • 커스텀 디렉티브 작성 시 app.directive('directiveName', function() { ... }) 형식 사용, restrict 옵션으로 'E' (요소), 'A' (속성), 'C' (클래스) 등 사용 가능
  • 링크 함수(link)는 DOM 조작 및 이벤트 처리에 사용, compile은 템플릿 DOM 조작 전에 사용
  • 두-way 바인딩= 사용, 고립 스코프(isolated scope) 사용으로 스코프 오염 방지

섹션별 세부 요약

1. 디렉티브의 정의와 목적

  • 디렉티브는 DOM 요소에 특정 동작을 추가하거나 DOM을 변환하는 마커
  • 주요 목적:
  • 코드 재사용성 향상 ()
  • 복잡한 UI 동작 간소화
  • 템플릿과 로직 분리

2. 사전 정의된 디렉티브 예시

  • 예시 디렉티브:
  • ng-model: 입력 필드와 모델 연결
  • ng-repeat: 컬렉션 아이템 반복
  • ng-click: 클릭 이벤트에 함수 연결
  • ng-if: 조건에 따라 요소 포함 여부 결정

3. 커스텀 디렉티브 작성 방법

  • 기본 구조:

```javascript

app.directive('helloWorld', function() {

return {

restrict: 'E',

template: '

Hello World from Custom Directive!

'

};

});

```

  • 사용 예시: 로 HTML 요소에 직접 삽입

4. `link` vs `compile` 함수

  • link: DOM 조작 및 이벤트 등록 (예: element.bind('click', ...))
  • compile: 템플릿 DOM 조작 전에 실행 (예: 템플릿 수정)
  • 추천: 대부분의 경우 link 사용

5. 디렉티브 최적화 팁

  • 고립 스코프 사용: scope: { user: '=' }으로 부모 스코프와의 두-way 바인딩
  • 디렉티브 이름: HTML에서 - 사용 (my-directive), JavaScript에서 camelCase 사용
  • 디렉티브 제한: 컴포넌트에는 'E', 동작에는 'A' 사용

6. 디렉티브 테스트 방법

  • 테스트 도구: Karma + Jasmine
  • 예시:

```javascript

describe('Directive: helloWorld', function() {

it('should render Hello World', function() {

expect(element.html()).toContain("Hello World");

});

});

```

결론

  • 커스텀 디렉티브는 재사용 가능한 UI 컴포넌트 개발에 필수, restrict, link, scope 옵션을 정확히 사용
  • 테스트KarmaJasmine을 활용해 디렉티브의 독립적인 동작을 검증
  • 최적화 팁: 고립 스코프 사용, 명확한 이름 지정, link 함수 우선 활용