[AngularJS] 컨트를러를 상속해서 사용하기

AngularJS에서 Directive와 Controller를 활용하여 객체화하며 사용하던 중

동일한 성격의 태그인데 동작이 조금씩 다른 태그가 필요한 문제가 발생했습니다.

이럴경우라면 공통 함수를 Root단으로 묶고 함수를 오버라이드해서 사용할 수 있도록

상속이라는 개념을 이용하면 유용할거 같아서 구글링을 하던 중 유익한 자료를 발견하여 공유하려고 합니다.

기본적으로 Angular에서는 scope라는 개념을 사용합니다.

scope란 컨트롤러가 영향을 주는 영역을 의미하는데

컨트롤러를 등록한 돔을 기준으로 모든 자식 Element들은 해당 scope의 영역내에 존재하게 됩니다.

따라서 1번 컨트롤러 하위에 1-1번 컨트롤러를 등록하면 1-1번 컨트롤러는 1번 컨트롤러의 scope에 있는 변수나 함수를 사용할 수 있도록 포함되게 됩니다.

따라서 Angular에서는 scope의 개념을 이용해 간단한 상속의 개념을 사용할 수 있습니다.

하지만 상속받은 컨트롤러는 사용하기 위해서 HTML에 의미없는 Element를 생성하여 부모 컨트롤러를 등록한다는 것은 영 내키지 않습니다.

이럴경우엔 Angular에서 제공하는 Extend 함수를 사용하면 됩니다.

예시 :: https://jsfiddle.net/2jhjod6q/10/

위의 예시에서 처럼 일반 함수를 이용해서 부모 함수 구현 후

Augular에서 상속을 받아서 사용하면 됩니다.

자료 출처

• Angular.js에서 HTML 구조없이 컨트롤러 상속받기 :: http://blog.outsider.ne.kr/981