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

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

• 컴파일 함수 – 템플릿 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가 주석 에서 언급했듯이 , 나머지 프레임 워크와 일관성을 유지하기 위해 범위 조작 기능을 컨트롤러에 넣을 수 있습니다.

답변

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

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