[javascript] AngularJS의 컴파일 기능과 링크 기능의 차이점은 무엇입니까?

나는 며칠 동안 벽에 머리를 대고 조금 더 설명이 필요하다고 느낍니다.

기본적으로 문서에서는 분리가 주로 성능 향상이라고 언급합니다. 하위 요소 자체가 컴파일되기 전에 DOM을 수정해야 할 때 컴파일 단계가 주로 사용된다는 것을 반복합니다.

우리의 목적을 위해, 나는 용어를 강조 할 것이다.

컴파일러 SERVICE ($ compile)는 DOM을 처리하고 지시문에서 다양한 코드 비트를 실행하는 각도 메커니즘입니다.

컴파일 FUNCTION은 지시문 내의 한 비트의 코드이며, 컴파일러 SERVICE ($ compile)에 의해 특정 시간에 실행됩니다.

컴파일 기능에 대한 참고 사항 :

1. ROOT 요소 (지시문이 영향을받는 요소)는 이미 DOM의 외부 레벨에서 컴파일 중이므로 (컴파일 SERVICE가 이미 해당 요소에서 지시문을 스캔 했으므로) 수정할 수 없습니다.

2. (중첩 된) 요소에 다른 지시문을 추가하려면 다음 중 하나를 수행하십시오.

   1. 컴파일 단계에서 추가해야합니다.

   2. 컴파일 서비스를 연결 단계에 삽입하고 요소를 수동으로 컴파일해야합니다. 그러나 무언가를 두 번 컴파일하는 것을 조심하십시오!

$ compile에 대한 중첩 및 명시 적 호출이 작동하는 방법을 확인하는 것도 도움이되므로 http://jsbin.com/imUPAMoV/1/edit 에서 놀이터를 만들었습니다 . 기본적으로 단지 단계를 console.log에 기록합니다.

여기에 해당 저장소에 표시되는 결과가 나와 있습니다. 사용자 지정 지시문 tp 및 sp의 DOM의 경우 다음과 같이 중첩됩니다.

<tp>
   <sp>
   </sp>
</tp>

각도 컴파일 서비스는 다음을 호출합니다.

tp compile
sp compile
tp pre-link
sp pre-link
sp post-link
tp post-link

jsbin 코드에는 또한 tp post-link FUNCTION이 세 번째 지시문 (위)에서 명시 적으로 컴파일 SERVICE를 호출합니다.

이제 몇 가지 시나리오를 통해 컴파일 및 링크를 사용하여 다양한 작업을 수행하는 방법을 보여 드리겠습니다.

시나리오 1 : 매크로로서의 지시어

속성에서 파생 될 수있는 지시문 (ng-show)을 템플릿의 무언가에 동적으로 추가하려고합니다.

다음을 가리키는 templateUrl이 있다고 가정하십시오.

<div><span><input type="text"></span><div>

사용자 지정 지시문을 원합니다.

<my-field model="state" name="address"></my-field>

DOM을 이것으로 바꿉니다.

<div><span ng-show="state.visible.address"><input ng-model="state.fields.address" ...>

기본적으로 지시문이 해석 할 수있는 일관된 모델 구조를 사용하여 상용구를 줄이려고합니다. 다시 말해, 당신은 매크로를 원합니다.

이것은 컴파일 단계에서 매우 유용합니다. 모든 DOM 조작을 속성에서 알고있는 것에 기초 할 수 있기 때문입니다. jQuery를 사용하여 속성을 추가하십시오.

compile: function(tele, tattr) {
   var span = jQuery(tele).find('span').first();
   span.attr('ng-show', tattr.model + ".visible." + tattr.name);
   ...
   return {
     pre: function() { },
     post: function() {}
   };
}

작업 순서는 다음과 같습니다 (앞에서 언급 한 jsbin을 통해 확인할 수 있음).

1. 컴파일 서비스가 내 필드를 찾습니다.
2. 지시문에서 컴파일 FUNCTION을 호출하여 DOM을 업데이트합니다.
3. 그런 다음 컴파일 서비스는 결과 DOM과 COMPILES (재귀 적으로)로 들어갑니다.
4. 그런 다음 컴파일 서비스는 사전 링크 하향식을 호출합니다.
5. 그런 다음 컴파일 서비스는 사후 링크 BOTTOM UP을 호출하므로 내 필드의 링크 기능을 내부 노드가 연결된 후라고합니다.

위의 예에서 모든 지시문의 작업은 컴파일 FUNCTION에서 수행되었으므로 링크가 필요하지 않습니다.

언제든지 지시문의 코드는 컴파일러 SERVICE가 추가 요소에서 실행되도록 요청할 수 있습니다.

이것은 컴파일 서비스를 주입하면 링크 함수에서 똑같은 일을 할 수 있음을 의미합니다.

directive('d', function($compile) {
  return {
    // REMEMBER, link is called AFTER nested elements have been compiled and linked!
    link: function(scope, iele, iattr) {
      var span = jQuery(iele).find('span').first();
      span.attr('ng-show', iattr.model + ".visible." + iattr.name);
      // CAREFUL! If span had directives on it before
      // you will cause them to be processed again:
      $compile(span)(scope);
    }
});

$ compile SERVICE에 전달하는 요소에 원래 지시어가 없다고 확신하는 경우 (예 : 사용자가 정의한 템플릿에서 왔거나 angular.element ()로 방금 생성 한 경우) 최종 결과는 거의 같습니다 이전과 동일합니다 (일부 작업을 반복 할 수 있음). 그러나 요소에 다른 지시문이있는 경우 명령을 다시 처리하여 모든 종류의 비정상적인 동작 (예 : 이벤트 및 시계의 이중 등록)이 발생할 수 있습니다.

따라서 컴파일 단계는 매크로 스타일 작업에 훨씬 적합한 선택입니다.

시나리오 2 : 범위 데이터를 통한 DOM 구성

이것은 위의 예에서 따릅니다. DOM을 조작하는 동안 범위에 액세스해야한다고 가정하십시오. 이 경우 컴파일 섹션은 범위를 사용할 수 있기 전에 발생하므로 쓸모가 없습니다.

따라서 유효성 검사를 통해 입력을 포주로 만들고 서버 쪽 ORM 클래스 (DRY)에서 유효성 검사를 내보내고 자동으로 적용하여 해당 유효성 검사에 적합한 클라이언트 쪽 UI를 생성하려고한다고 가정하겠습니다.

모델은 다음을 추진할 수 있습니다.

scope.metadata = {
  validations: {
     address: [ {
       pattern: '^[0-9]',
       message: "Address must begin with a number"
     },
     { maxlength: 100,
       message: "Address too long"
     } ]
  }
};
scope.state = {
  address: '123 Fern Dr'
};

지시문을 원할 수도 있습니다.

<form name="theForm">
  <my-field model="state" metadata="metadata" name="address">
</form>

다양한 유효성 검사 오류를 표시하기 위해 적절한 지시문과 div를 자동으로 포함하는 방법 :

<form name="theForm">
  <div>
    <input ng-model="state.address" type="text">
    <div ng-show="theForm.address.$error.pattern">Address must begin with a number</input>
...

이 경우 범위에 액세스해야합니다 (검증이 저장되어 있기 때문에) 추가를 수동으로 컴파일해야하며 다시 컴파일하지 않도록주의해야합니다. (부수적으로, 포함 양식 태그에 이름을 설정해야하며 (여기서는 양식을 가정하고 있음) iElement.parent (). controller ( ‘form’). $ name과 연결하여 액세스 할 수 있습니다) .

이 경우 컴파일 함수를 작성할 필요가 없습니다. 링크는 정말로 당신이 원하는 것입니다. 단계는 다음과 같습니다.

1. 각도 지시문이 완전히없는 템플릿을 정의하십시오.
2. 다양한 속성을 추가하는 링크 함수 정의
3. 최상위 요소 (my-field 지시문)에서 허용 할 수있는 각도 지시문을 제거하십시오. 이미 처리되었으므로 이중 처리되지 않도록하는 방법입니다.
4. 최상위 요소에서 컴파일 서비스를 호출하여 완료

이렇게 :

angular.module('app', []).
directive('my-field', function($compile) {
  return {
    link: function(scope, iele, iattr) {
      // jquery additions via attr()
      // remove ng attr from top-level iele (to avoid duplicate processing)
      $compile(iele)(scope); // will pick up additions
    }
  };
});

물론 최상위 요소를 다시 컴파일 할 때 ng 지시문의 중복 처리에 대해 걱정할 필요가 없도록 중첩 된 요소를 하나씩 컴파일 할 수 있습니다.

이 시나리오에 대한 마지막 참고 사항 : 서버에서 유효성 검사의 정의를 추진하고 있음을 암시했으며 내 예에서는 이미 범위에있는 데이터로 표시했습니다. 독자가 REST API에서 해당 데이터를 가져와야하는 방법을 알아내는 연습으로 남겨 둡니다 (힌트 : 지연 컴파일).

시나리오 3 : 링크를 통한 양방향 데이터 바인딩

물론 가장 일반적으로 사용되는 링크는 watch / apply를 통해 양방향 데이터 바인딩을 간단히 연결하는 것입니다. 대부분의 지침은이 범주에 속하므로 다른 곳에서 적절하게 다루어집니다.

답변

var app = angular.module ( 'app', []);

app.controller ( 'msg', [ '$ scope', 함수 ($ scope) {

}]);

app.directive ( 'message', function ($ interpolate) {
    반환{

        컴파일 : function (tElement, tAttributes) {
            console.log (tAttributes.text + "-컴파일 중." ");
            {

                사전 : function (scope, iElement, iAttributes, controller) {
                    console.log (iAttributes.text + "-in pre ..");
                },

                게시물 : function (scope, iElement, iAttributes, controller) {
                    console.log (iAttributes.text + "-In Post ..");
                }

            }
        },

        컨트롤러 : function ($ scope, $ element, $ attrs) {
            console.log ($ attrs.text + "-제어기에서 ..");
        },

    }
});

<body ng-app="app">
<div ng-controller="msg">
    <div message text="first">
        <div message text="..second">
            <div message text="....third">

            </div>
        </div>
    </div>
</div>