Angular JS: 이미 디렉티브의 스코프가 있는 컨트롤러가 있는데 디렉티브의 링크 함수가 필요한 것은 무엇입니까?

Angular JS: 이미 디렉티브의 스코프가 있는 컨트롤러가 있는데 디렉티브의 링크 함수가 필요한 것은 무엇입니까?

범위와 템플릿에서 몇 가지 작업을 수행해야 합니다.할수 것 .link 「」의 어느쪽controller(양쪽 모두 스코프에 액세스 할 수 있기 때문에).

언제 사용해야 하는 경우입니까?link트롤롤 ?닌 ?? ???

angular.module('myApp').directive('abc', function($timeout) {
    return {
        restrict: 'EA',
        replace: true,
        transclude: true,
        scope: true,
        link: function(scope, elem, attr) { /* link function */ },
        controller: function($scope, $element) { /* controller function */ }
    };
}

저는 했습니다.link비언어적 세계입니다.나는 를 사용할 수 있다.$watch,$digest ★★★★★★★★★★★★★★★★★」$apply.

의 의의는 무엇입니까?link이미 컨트롤러가 있었을 때 기능을 수행했습니까?

내가 처음 애쓴 후에link ★★★★★★★★★★★★★★★★★」controller그런 것들을 많이 읽으니까 이제 답이 나온 것 같아요.

먼저 이해합시다.

각도 지시어는 간단히 설명하면 어떻게 작동합니까?

• 템플릿(문자열 또는 문자열에 로드)으로 시작합니다.

  var templateString = '<div my-directive>{{5 + 10}}</div>';

• 이제 이 ㅇㅇ, ㅇ.templateString각 요소로서 포장되어 있다

  var el = angular.element(templateString);

• ★★★★★★★★★★★★★★★★ el, $compile링크 기능을 되돌립니다.

  var l = $compile(el)

  무슨 일이 일어나는지 알려줄게

  • $compile템플릿 전체를 통과하여 인식되는 모든 지시사항을 수집합니다.
  • 검출된 모든 디렉티브는 재귀적으로 컴파일 되어 있습니다.link함수가 수집됩니다.
  • 모든 link이 새로운 .link하여 로로기 as as as로 l.

• 마지막으로 finally finally finally finally를 합니다.scope 기능을 l이 (link)를 하여 을 더욱 scope그리고 그에 상응하는 요소들.

  l(scope)

• 하면 " " " 가 됩니다.template의 DOM를 호출합니다.controllerDOM 내의 템플릿과 공유되는 스코프에 워치를 추가합니다.

컴파일 vs 링크 vs 컨트롤러 비교:

• 모든 디렉티브는 한 번만 컴파일되며 링크 함수는 재사용을 위해 유지됩니다.따라서 지시문의 모든 인스턴스에 적용할 수 있는 것이 있는 경우 지시문의 내부에서 수행되어야 합니다.compile★★★★★★ 。

• 컴파일 에 파파을 now now now now가 .link이 기능은 템플릿을 DOM에 첨부할 때 실행됩니다.따라서 모든 지시 인스턴스에 고유한 모든 작업을 수행합니다.예: 이벤트 첨부, 범위에 따른 템플릿 변환 등

• 마지막으로 명령어가 동작하는 동안 컨트롤러는 라이브 상태로 사용할 수 있도록 되어 있습니다.DOM(으) 그러니까:

  (1) 링크가 있는 View [V] (템플릿) 설정 후 $scope저희 [M]과$controllerM V C의 [C]는

  (2) 시계 셋업으로 $scope의 2방향 바인딩을 활용합니다.

  (3)$scopewatch는 런타임에 템플릿을 감시하기 때문에 컨트롤러에 추가됩니다.

  으로 (4) 지지 ( ( (controller,, 관관는디 likelikelike likelikelike Like （ Like ) ）myTabshttps://docs.angularjs.org/guide/directive)의 예

  ( 이 을 (5)에서 할 수 link기능하지만, 그것은 관심사의 분리에 관한 것입니다.

그 때문에, 마지막으로, 모든 부품에 딱 맞는 다음의 것을 준비했습니다.

컨트롤러가 필요한 이유

「 」의 link ★★★★★★★★★★★★★★★★★」controllerDOM에 디렉티브를 네스트하여 부모 디렉티브에서 네스트된 디렉티브로 API 기능을 공개하는 경우에 유효하게 됩니다.

문서에서:

베스트 프랙티스: API를 다른 디렉티브에 공개하려면 컨트롤러를 사용합니다.그렇지 않으면 링크를 사용합니다.

두 지시문을 갖고 하면 됩니다.my-form ★★★★★★★★★★★★★★★★★」my-text-input은 '그냥'을 원한다.my-text-input에만 my-form어디에도 없어요

때는 됩니다.my-text-input컨트롤러가 필요한 경우parent인수를 는 "DOM"을 필요로 합니다.require: '^myForm'서 부모 는 " " "가 됩니다injectedlink $scope, element, attributes컨트롤러의 함수를 호출하여 부모 디렉티브와 통신할 수 있습니다.

또, 이러한 컨트롤러가 발견되지 않는 경우는, 에러가 발생합니다.

링크를 사용하는 이유

.link하고 있는 는, 기능합니다.controller그 $scope에서 입수할 수 있습니다.controller 양쪽 모두를 하면서, 모두를 정의해 주세요link ★★★★★★★★★★★★★★★★★」controller가 있다( 「2」 「2」).controller이 실행되기 전에 실행된다.

그러나 Angular 방식을 준수하기 위해 대부분의 DOM 조작 및 2방향 바인딩은 다음을 사용합니다.$watchers통상, 로 행해집니다.link 및 API가 $scope은 조 the the the the the the the manip manip manip manip 。controller규칙은 이 됩니다(는 「」, 「컨트롤러」를 합니다).directive 및 ""link는 「」를 합니다.DOM+ 외 + + （ （ + + + 。

controllerfunction 모델 뷰 function/object는 추상화 모델 뷰 컨트롤러(MVC)를 .MVC에 대해 새롭게 기술할 것은 없지만, 여전히 가장 중요한 각도 기술입니다. 즉, 관심사를 더 작은 조각으로 나누는 것입니다. 만약에 , 반응할 필요가 있다면, 반응할 필요가 있습니다.Model에서 변경ViewController그 일에 적임자라고 생각합니다.

★★★★★★★★★★★★★★★★★★★★★★의 이야기linkMVC를 이용하다 꼭 은, 그 그 경계를 넘어서고 싶은 것입니다.controller/model/view （ ( ( ） 。

이 파라미터부터 시작합시다.link★★★★

function link(scope, element, attrs) {

• scope는 Angular scope 개체입니다.
• element는 이 디렉티브와 일치하는 jqLite로 랩된 요소입니다.
• attrs는 정규화된 Atribute 이름과 대응하는 값을 가진 객체입니다.

「 」를 , 「 」를 붙입니다.link모든 디렉티브가 컴파일, 링크라는 초기화 프로세스 단계를 거치고 있음을 설명해야 합니다.Brad Green과 Shyam Seshadri 책 Angular JS에서 발췌:

컴파일 단계(링크의 자매지, 선명한 이미지를 얻기 위해 여기에 기재합니다.

이 단계에서 Angular는 템플릿에 등록된 모든 지시사항을 식별하기 위해 DOM을 통과합니다.그런 다음 각 디렉티브에 대해 디렉티브의 규칙(템플릿, 치환, 트랜슬루드 등)에 따라 DOM을 변환하고 존재하는 경우 컴파일 함수를 호출합니다.그 결과 컴파일된 템플릿 함수가 생성됩니다.

링크 단계:

보기를 동적으로 만들기 위해 Angular는 각 지시어에 대해 링크 함수를 실행합니다.일반적으로 링크 함수는 DOM 또는 모델에 청취자를 만듭니다.이러한 청취자는 뷰와 모델을 항상 동기화합니다.

「 」의 사용 예.link커스텀 디렉티브의 작성에 대해서는, 여기를 참조해 주세요.예를 참조하십시오. 페이지에 "날짜 시간"을 삽입하는 DOM을 조작하는 지시문 작성은 매초 새로 고쳐집니다.

위의 풍부한 출처에서 나온 아주 짧은 부분만 보면 DOM을 사용한 실제 조작을 알 수 있습니다.$timeout 서비스에 대한 후크 기능이 있으며 메모리 누수를 방지하기 위해 파괴자 호출에서 지워집니다.

.directive('myCurrentTime', function($timeout, dateFilter) {

 function link(scope, element, attrs) {

 ...

 // the not MVC job must be done
 function updateTime() {
   element.text(dateFilter(new Date(), format)); // here we are manipulating the DOM
 }

 function scheduleUpdate() {
   // save the timeoutId for canceling
   timeoutId = $timeout(function() {
     updateTime(); // update DOM
     scheduleUpdate(); // schedule the next update
   }, 1000);
 }

 element.on('$destroy', function() {
   $timeout.cancel(timeoutId);
 });

 ...

언급URL : https://stackoverflow.com/questions/20018507/angular-js-what-is-the-need-of-the-directive-s-link-function-when-we-already-ha