AngularJS 기초 [2]

AngularJS 기초 [2]

디렉티브

디렉티브의 가장 간단한 형태는 애플리케이션이 필요한 곳에

여러 번 사용할 수 있는 작은 HTML 조각형태라고 할 수 있습니다.

디렉티브를 사용하면 애플리케이션에 별다른 노력 없이도 쉽게 DOM을 주입하거나

사용자 정의 DOM의 상요작용을 적용할 수 있습니다.

디렉티브는 간단하지 않을 뿐더러 러닝커브가 생각보다 꽤 높긴 하지만 아래의 글을 읽는다면 도움이 될 것입니다.

아래 예제에서는 아주 간단한 버튼을 생성해서 마크업을 주입해보겠습니다.

DOM에 디렉티브를 정의하는 다양한 방법이 있지만 주로 사용하는 방법은 다음과 같습니다.

Click me Click me Click me

이제 디렉티브를 어떻게 사용하고 주입하는지 알아봤으니 버튼을 생성해보겠습니다.

애플리케이션의 전역 변수인 myApp을 사용해서 디렉티브를 선언하는 방법입니다

myApp.directive('customButton', function () { return { link: function (scope, element, attrs) { // DOM manipulation/events } }; });

.directive() 메서드로 디렉티브를 선언하고 디렉티브 이름으로 'customButton' 을 사용했습니다.

디렉티브 이름에 대문자를 사용하면 DOM에서는 하이픈으로 구분해서 사용하게 됩니다.

디렉티브는 여러개의 속성을 가지는 객체를 반환합니다.

가장 중요하다고 생각되는 속성은 restrict, replace, transclude, template, templateUrl, link 속성이 있습니다.

이 속성들을 추가해봅시다.

myApp.directive('customButton', function () { return { restrict: 'A', replace: true, transclude: true, template: '' + '' + '', link: function (scope, element, attrs) { // DOM manipulation/events } }; });

버튼이 제대로 생성이 되면 성공입니다.

브라우저의 요소 검사 로 마크업이 잘 주입됐는지 확인해봅시다.

어떻게 동작하는지 알아 볼 수 있을 겁니다.

다음은 디렉티브의 각 속성에 대한 설명입니다.

restrict: 오래된 IE를 지원해야하는 프로젝트를 진행중이라면 분명 속성/클래스 정의가 필요할 것입니다.

‘A’라고 지정하면 속성 으로만 사용할 수 있다는 의미이고 ‘E’는 요소, ‘C’는 클래스, ‘M’은 주석 으로만 사용할 수 있습니다. 기본 값은 ‘EA’이고 이 처럼 여러 개의 제한을 동시에 걸수도 있습니다.

replace: 디렉티브에 정의한 DOM의 마크업을 변경할 수 있음을 의미합니다.

예제를 보면 처음의 DOM이 디렉티브의 템플릿으로 어떻게 변경됐는지 알 수 있을 것입니다.

transclude: transclude를 이용하면 기존의 DOM 내용을 디렉티브안에 복사할 수 있습니다.

‘Click me’라는 문자열이 렌더링될 때 디렉티브로 옮겨진 것을 확인 할 수 있습니다.

template: 주입할 마크업을 의미합니다. HTML의 아주 작은 일부분을 정의할 때 특히 좋으며, 주입된 템플릿은 Angular로 컴파일되며 이로 인해 handlebar 템플릿 태그도 사용할 수 있습니다.

templateUrl: template 속성과 비슷하지만

myApp.directive('customButton', function () { return { templateUrl: 'templates/customButton.html' // 나머지 디렉티브 내용... }; });

이렇게 했을 때 좋은 점은 브라우저가 HTML 파일을 캐싱한다는 것입니다.

만약 캐싱을 원하지 않는다면,

이렇게 하면 Angular에게 이 ID로 ng-template 을 선언했다고 알려주게 됩니다..

그러면 Angular는 ng-template 혹은 *.html 파일을 찾기 시작할 것입니다.

저는 *.html 파일을 선호하는데, 쉽게 관리할 수 있고 성능도 잘 나오며 DOM도 깔끔하게 유지할 수 있기 때문입니다.

from http://greenkick.tistory.com/9 by ccl(A) rewrite - 2021-01-07 01:02:23