지시문을 정의 할 때 '컨트롤러', '링크'및 '컴파일'기능의 차이점


393

어떤 곳에서는 지시문 로직에 컨트롤러 기능을 사용하는 것으로 보이고 다른 곳에서는 링크를 사용합니다. 각도 홈페이지의 탭 예제는 컨트롤러 하나를 사용하고 다른 명령어는 링크를 사용합니다. 둘의 차이점은 무엇입니까?


2
지시어 함수에 대한보다 포괄적 인 개요 : 각도 지시어-컴파일, 컨트롤러, 사전 링크 및 사후 링크 사용시기 .
Izhaki

답변:


635

질문을 약간 확장하고 컴파일 기능도 포함시킵니다.

  • 컴파일 함수 - 템플릿 DOM 조작 (예 : tElement = 템플릿 요소 조작)에 사용되므로 지시문과 관련된 템플릿의 모든 DOM 복제본에 적용됩니다. 링크 함수 (또는 사전 및 사후 링크 함수)도 필요하고 컴파일 함수를 정의한 'link'경우 'compile'속성이 정의 된 경우 속성이 무시 되므로 컴파일 함수는 링크 함수를 리턴해야합니다 .

  • 링크 함수 -일반적으로 리스너 콜백 (예 : $watch스코프의 표현식) 을 등록 하고 DOM 업데이트 (즉, iElement = 개별 인스턴스 요소 조작)에 사용합니다. 템플릿이 복제 된 후에 실행됩니다. 예를 들어, 내부 <li ng-repeat...>에서 링크 함수는 <li>특정 <li>요소에 대한 템플릿 (tElement)이 iElement로 복제 된 후에 실행 됩니다. A를 $watch사용하면 지시문에 범위 속성 변경 사항 (범위가 각 인스턴스와 연결됨)을 알릴 수 있으며, 지시문은 업데이트 된 인스턴스 값을 DOM에 렌더링 할 수 있습니다.

  • 컨트롤러 기능 -다른 지시문이이 지시문과 상호 작용해야 할 때 사용해야합니다. 예를 들어 AngularJS 홈 페이지에서 pane 지시문은 tabs 지시문이 유지 관리하는 범위에 자체를 추가해야하므로 tab 지시문은 pane 지시문이 액세스 / 호출 할 수있는 컨트롤러 메서드 (think API)를 정의해야합니다.

    탭과 창 지시문에 대한 자세한 설명과 tabs 지시문 this이 on 대신을 사용하여 컨트롤러에서 함수를 만드는 이유는 AngularJS 컨트롤러에서 'this'와 $ scope$scope 를 참조하십시오 .

일반적으로 메소드 $watches등을 지시문의 컨트롤러 또는 링크 함수에 넣을 수 있습니다 . 컨트롤러가 먼저 실행되며 때로는 중요한 경우가 있습니다 (ctrl 및 link 함수가 두 개의 중첩 된 지시문으로 실행될 때 기록하는 이 바이올린 참조 ). Josh가 주석 에서 언급했듯이 , 나머지 프레임 워크와 일관성을 유지하기 위해 범위 조작 기능을 컨트롤러에 넣을 수 있습니다.


131
이 설명은 주요 AngularJS 문서에 있거나 최소한 그것에 대한 참조입니다
Dogoku

7
이것은 유익한 답변이지만 읽기가 어렵다고 생각합니다. 더 많은 문장 부호와 작은 문장이 도움이 될 수 있습니다. 전반적인 답변에 감사드립니다.
Marty Cortez

$ compiler는 'compile'속성이있는 경우 'link'속성을 무시합니다. 그러나 '제어기'속성이있는 경우는 어떻습니까? 'controller'로 인해 $ compiler가 'link'및 'compile'속성 중 하나 또는 둘 다를 무시합니까? '컨트롤러'와 함께 '컴파일'을 사용하는 것이 가능하고 /하거나 권장 되는가?
Carl G

1
@CarlG, 컨트롤러 속성의 존재는 링크 및 컴파일과 관련하여 $ compiler에 영향을 미치지 않습니다. 컴파일과 컨트롤러를 사용할 수 있습니다.
Mark Rajcok

1
"DOM 리스너"는 "(예 : 범위의 $ watch 표현식)"이 아닙니다. 하나는와 같은 이벤트를 위해 DOM을 듣고 mouseover다른 하나는 속성 변경 범위를 듣습니다 . 큰 차이.
Dmitri Zaitsev

56

Mark의 답변을 보완하기 위해 컴파일 함수는 범위에 액세스 할 수 없지만 링크 함수는 액세스 할 수 있습니다.

이 비디오를 정말 추천합니다. Misko Hevery (AngularJS의 아버지)가 지시문작성 하여 차이점과 기술을 설명합니다. ( 비디오의 14:41 표시에서 컴파일 기능과 링크 기능의 차이점 ).


3
동영상 링크는 +1입니다. 매우 유익합니다.
Rob Kielty


35
  1. 컴파일 전 코드 실행 : 컨트롤러 사용
  2. 컴파일 후 코드 실행 : 링크 사용

각도 규칙 : 컨트롤러에서 비즈니스 로직을 작성하고 링크에서 DOM 조작을 작성하십시오.

이 외에도 다른 지시문의 링크 함수에서 하나의 컨트롤러 함수를 호출 할 수 있습니다. 예를 들어 3 개의 사용자 지정 지시문이 있습니다.

<animal>
<panther>
<leopard></leopard>
</panther> 
</animal>

"표범"지시어 내에서 동물에 접근하고 싶습니다.

http://egghead.io/lessons/angularjs-directive-communication 은 상호 지시문 통신에 대해 도움이 될 것입니다.


18
"컴파일 전에 코드 실행 : 컨트롤러 사용". 이것은 올바르지 않습니다. compile항상 전에 실행 controller됩니다.
Izhaki

레오파드 지시에서 동물에 접근 할 수는 없습니다 (적어도 간단하지는 않습니다). 자식 지시문은 부모 지시문에서 컨트롤러 메소드에 액세스 할 수 있지만 형제 지시문 (위의 예와 같이)은 서로의 컨트롤러를 호출 할 수 없습니다.
Benjamin White

2
표범은 실제로 일종의 표범입니까? 또한, 참고로 ... 지시문에 컨트롤러-AND-컨트롤러를 가질 수 있습니까?
Cody

1
예 표범 / 재규어는 표범입니다. 예, 지시문 내에 링크와 컨트롤러가 있습니다.
Rahul

1
Angular 개발자 안내서 : "모범 사례 : API를 다른 지시문에 노출 시키려면 컨트롤러를 사용하십시오. 그렇지 않으면 링크를 사용하십시오."
Martin van Driel

6

컴파일 기능 -

  1. 컨트롤러 및 링크 기능 전에 호출됩니다.
  2. 컴파일 함수에는 원래 템플릿 DOM이 있으므로 AngularJS가 인스턴스를 생성하기 전에 그리고 범위를 만들기 전에 원본 DOM을 변경할 수 있습니다.
  3. ng-repeat는 완벽한 예입니다-원본 구문은 템플릿 요소이고 HTML의 반복되는 요소는 인스턴스입니다
  4. 여러 요소 인스턴스가있을 수 있으며 하나의 템플릿 요소 만있을 수 있습니다
  5. 범위는 아직 사용할 수 없습니다
  6. 컴파일 함수는 함수와 객체를 반환 할 수 있습니다
  7. (포스트 링크) 함수를 리턴하는 것은 컴파일 함수가 비어있을 때 구성 오브젝트의 링크 특성을 통해 링크 함수를 등록하는 것과 같습니다.
  8. 사전 및 사후 속성을 통해 등록 된 함수가있는 객체 반환-링크 단계에서 링크 함수를 호출 할시기를 제어 할 수 있습니다. 아래의 사전 연결 및 사후 연결 기능에 대한 정보를 참조하십시오.

통사론

function compile(tElement, tAttrs, transclude) { ... }

제어 장치

  1. 컴파일 함수 후에 호출
  2. 범위는 여기에 있습니다
  3. 다른 지시문으로 액세스 할 수 있습니다 (요구 특성 참조).

사전 링크

  1. 링크 기능은 DOM 리스너를 등록하고 DOM을 업데이트합니다. 템플릿이 복제 된 후에 실행됩니다. 이것은 대부분의 지시어 로직이 배치되는 곳입니다.

  2. angular.element를 사용하여 컨트롤러에서 DOM을 업데이트 할 수 있지만 링크 기능에서 요소가 제공되므로 권장하지 않습니다.

  3. 사전 링크 기능은 각도 j가 이미 하위 요소를 컴파일했을 때 하위 요소의 포스트 링크가 호출되기 전에 실행되는 로직을 구현하는 데 사용됩니다.

사후 링크

  1. 링크 함수 만있는 지시문, 각도는 함수를 포스트 링크로 취급합니다.

  2. 컴파일, 컨트롤러 및 사전 링크 기능 후에 post가 실행되므로 지시문 로직을 추가하는 가장 안전하고 기본 위치로 간주됩니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.