지시어를 정의할 때 '컨트롤러', '링크' 및 '컴파일' 함수의 차이

지시어를 정의할 때 '컨트롤러', '링크' 및 '컴파일' 함수의 차이

지시 로직에 컨트롤러 기능을 사용하는 곳도 있고 링크를 사용하는 곳도 있습니다.각진 홈페이지의 탭 예에서는 1개의 컨트롤러와 다른 디렉티브의 링크가 사용되고 있습니다.그 둘의 차이점은 무엇입니까?

질문을 조금 확장하고 컴파일 기능도 포함하겠습니다.

• 컴파일 함수 - 템플릿 DOM 조작(즉, tElement = 템플릿 요소의 조작)에 사용되므로 명령어와 관련된 템플릿의 모든 DOM 복제에 적용되는 조작(링크 함수(또는 링크 전/후 함수)이 필요하고 컴파일 함수를 정의한 경우 컴파일 함수는 링크 fu를 반환해야 합니다.그 이유는'link'Atribute는 무시됩니다.'compile'Atribute가 정의되어 있습니다).

• link function - 일반적으로 리스너 콜백을 등록하기 위해 사용합니다(즉,$watchDOM 업데이트(즉, iElement = 개별 인스턴스 요소 조작)를 수행할 수 있습니다.템플릿이 복제되면 실행됩니다.예를 들어, 내부, 내부,<li ng-repeat...>링크 함수는 다음 시간 후에 실행됩니다.<li>템플릿(tElement)이 (iElement에) 복제되어 있다.<li>요소.a$watch는, 디렉티브에 스코프 속성 변경(스코프가 각 인스턴스에 관련지어짐)을 통지할 수 있도록 합니다.이를 통해 디렉티브는 업데이트된 인스턴스 값을 DOM 에 렌더링할 수 있습니다.

• 컨트롤러 기능 - 다른 디렉티브가 이 디렉티브와 상호작용해야 할 때 사용해야 합니다.예: 각도JS 홈페이지, 페인의 디렉티브는 탭 디렉티브에 의해 유지되는 스코프에 자신을 추가해야 합니다.따라서 탭 디렉티브는 페인의 디렉티브가 액세스/호출할 수 있는 컨트롤러 메서드(think API)를 정의해야 합니다.
  
  탭 및 창 지시어에 대한 자세한 설명과 탭 지시문이 를 사용하여 컨트롤러에 함수를 생성하는 이유를 자세히 설명합니다.this(가 아니라$scope), "this"와 "$scope in Angular"를 참조하십시오.JS 컨트롤러

일반적으로 메서드를 넣을 수 있습니다.$watches명령어 컨트롤러 또는 링크 기능 중 하나로 변환합니다.컨트롤러가 먼저 실행되어 문제가 될 수 있습니다(ctrl 및 link 함수가 2개의 중첩된 지시로 실행될 때 로그에 기록되는 이 바이올린 참조).Josh가 코멘트에서 언급했듯이, 나머지 프레임워크와 일관성을 유지하기 위해 컨트롤러 내부에 스코프 조작 기능을 넣는 것이 좋습니다.

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

이 비디오를 추천합니다; Misko Hebery (Angular의 아버지)의 Writing DirectivesJS)에서 차이와 몇 가지 기술을 설명합니다(동영상에서 컴파일 함수와 링크 함수의 차이 14:41).

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

각도 표기법 : 컨트롤러에 비즈니스 로직을, 링크에 DOM 조작을 기술합니다.

이와는 별도로 다른 디렉티브의 링크 함수에서 컨트롤러 함수를 호출할 수 있습니다.예를 들어, 3개의 커스텀 디렉티브가 있습니다.

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

그리고 당신은 동물에 접근하고 싶어합니다. "지시적"의 지시 안에서.

http://egghead.io/lessons/angularjs-directive-communication는 각 기관 간의 커뮤니케이션에 대해 알아두면 도움이 될 것입니다.

컴파일 함수 -

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

구문

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

컨트롤러

1. 컴파일 함수 뒤에 호출되다
2. 스코프는 이쪽에서 입수할 수 있습니다.
3. 다른 디렉티브로 액세스 할 수 있습니다(require Attribute 참조).

링크 전

1. 링크 함수는 DOM 청취자를 등록하고 DOM을 업데이트하는 역할을 합니다.템플릿이 복제되면 실행됩니다.여기에 대부분의 지시 논리가 배치될 것이다.

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

3. pre-link 함수는 angular js가 이미 하위 요소를 컴파일했지만 하위 요소의 포스트 링크가 호출되기 전에 실행되는 논리를 구현하기 위해 사용됩니다.

포스트 링크

1. 링크 기능만 있는 지시어, 앵글은 기능을 포스트 링크로 취급합니다.

2. 게시물은 컴파일, 컨트롤러 및 프리링크 펑시톤 후에 실행되므로 이것이 지시 로직을 추가하는 가장 안전하고 기본 장소로 간주됩니다.

언급URL : https://stackoverflow.com/questions/12546945/difference-between-the-controller-link-and-compile-functions-when-definin