답변:
질문을 약간 확장하고 컴파일 기능도 포함시킵니다.
컴파일 함수 - 템플릿 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가 주석 에서 언급했듯이 , 나머지 프레임 워크와 일관성을 유지하기 위해 범위 조작 기능을 컨트롤러에 넣을 수 있습니다.
mouseover
다른 하나는 속성 변경 범위를 듣습니다 . 큰 차이.
Mark의 답변을 보완하기 위해 컴파일 함수는 범위에 액세스 할 수 없지만 링크 함수는 액세스 할 수 있습니다.
이 비디오를 정말 추천합니다. Misko Hevery (AngularJS의 아버지)가 지시문 을 작성 하여 차이점과 기술을 설명합니다. ( 비디오의 14:41 표시에서 컴파일 기능과 링크 기능의 차이점 ).
각도 규칙 : 컨트롤러에서 비즈니스 로직을 작성하고 링크에서 DOM 조작을 작성하십시오.
이 외에도 다른 지시문의 링크 함수에서 하나의 컨트롤러 함수를 호출 할 수 있습니다. 예를 들어 3 개의 사용자 지정 지시문이 있습니다.
<animal>
<panther>
<leopard></leopard>
</panther>
</animal>
"표범"지시어 내에서 동물에 접근하고 싶습니다.
http://egghead.io/lessons/angularjs-directive-communication 은 상호 지시문 통신에 대해 도움이 될 것입니다.
compile
항상 전에 실행 controller
됩니다.
컴파일 기능 -
통사론
function compile(tElement, tAttrs, transclude) { ... }
제어 장치
사전 링크
링크 기능은 DOM 리스너를 등록하고 DOM을 업데이트합니다. 템플릿이 복제 된 후에 실행됩니다. 이것은 대부분의 지시어 로직이 배치되는 곳입니다.
angular.element를 사용하여 컨트롤러에서 DOM을 업데이트 할 수 있지만 링크 기능에서 요소가 제공되므로 권장하지 않습니다.
사전 링크 기능은 각도 j가 이미 하위 요소를 컴파일했을 때 하위 요소의 포스트 링크가 호출되기 전에 실행되는 로직을 구현하는 데 사용됩니다.
사후 링크
링크 함수 만있는 지시문, 각도는 함수를 포스트 링크로 취급합니다.
컴파일, 컨트롤러 및 사전 링크 기능 후에 post가 실행되므로 지시문 로직을 추가하는 가장 안전하고 기본 위치로 간주됩니다.