트랜슬루드 함수와 클론 링크 함수는 정확히 어떤 기능을 합니까?

트랜슬루드 함수와 클론 링크 함수는 정확히 어떤 기능을 합니까?

Angular docs 명령에서 컴파일 함수는 3개의 파라미터가 있으며 그 중 하나는transclude이 문서에서 제공되는 설명은 다음과 같습니다.

transclude - 트랜스코드 링크 함수: function(scope, cloneLinkingFn).

저는 당신이 클론 링크 함수에서 정확히 무엇을 할 수 있는지 이해하려고 합니다.어떤 매개 변수가 전달되는지도 몰라요라는 파라미터가1개 있는 예를 찾았습니다.cloneHTML 요소로 보입니다.다른 파라미터가 있나요?정확히 어떤 HTML 요소입니까?저도 아마 이 제품을transclude: 'element'내 지시대로요사용 시 이러한 질문에 대한 답변이 변경됩니까?'element'대신true?

간단한 예시로 결론을 이해하지만, 특히 더 복잡한 예를 찾을 수 없습니다.transclude: 'element'이 모든 것에 대해 누군가 좀 더 자세히 설명해 주세요.감사해요.

편집: 답변을 완전히 변경하여 커뮤니티 Wiki(내게는 포인트 없음)로 표시합니다.이 답변은 완전히 틀렸습니다.

아래 @Jonah가 지적한 바와 같이 디렉티브의 컴파일 옵션과 트랜슬루전 함수의 사용에 관한 매우 좋은 기사를 소개합니다.

기본 개념은 컴파일 함수가 링크 함수를 반환해야 한다는 것입니다.링크 함수 내에 있는 트랜슬레이션 함수를 사용하여 트랜슬레이드된 DOM 요소의 클론을 가져와 컴파일하고 삽입이 필요한 위치에 삽입할 수 있습니다.

여기 내가 플런커에 대해 궁리했던 더 좋은 예가 있다.

컴파일 함수의 개념은 링크 함수가 생성되고 호출되기 전에 전달된 속성을 기반으로 DOM 요소를 프로그래밍 방식으로 변경할 수 있는 기회를 제공하는 것입니다.

// a silly directive to repeat the items of a dictionary object.
app.directive('keyValueRepeat', function ($compile){
  return {
    transclude: true,
    scope: {
      data: '=',
      showDebug: '@'
    },
    compile: function(elem, attrs, transclude) {

      if(attrs.showDebug) {                
        elem.append('<div class="debug">DEBUG ENABLED {{showDebug}}</div>');
      }

      return function(scope, lElem, lAttrs) {
        var items = [];
        console.log(lElem);
        scope.$watch('data', function(data) {

          // remove old values from the tracking array
          // (see below)
          for(var i = items.length; i-- > 0;) {
            items[i].element.remove();
            items[i].scope.$destroy();
            items.splice(i,1);
          }

          //add new ones
          for(var key in data) {

            var val = data[key],
                childScope = scope.$new(),
                childElement = angular.element('<div></div>');

            // for each item in our repeater, we're going to create it's
            // own scope and set the key and value properties on it.
            childScope.key = key;
            childScope.value = val;

            // do the transclusion.
            transclude(childScope, function(clone, innerScope) {
              //clone is a copy of the transcluded DOM element content.
              console.log(clone);

              // Because we're still inside the compile function of the directive,
              // we can alter the contents of each output item
              // based on an attribute passed.
              if(attrs.showDebug) {                
                clone.prepend('<span class="debug">{{key}}: {{value}}</span>');
              }

              //append the transcluded element.
              childElement.append($compile(clone)(innerScope));
            });

            // add the objects made to a tracking array.
            // so we can remove them later when we need to update.
            items.push({
              element: childElement,
              scope: childScope
            });

            lElem.append(childElement);
          }
        });
      };
    }
  };
});

언급URL : https://stackoverflow.com/questions/13183005/what-exactly-do-you-do-with-the-transclude-function-and-the-clone-linking-functi