transclude 함수와 복제 연결 함수로 정확히 무엇을합니까?

transclude 함수와 복제 연결 함수로 정확히 무엇을합니까?

---

로부터 지시 각도 문서 , 나는 컴파일 기능 중 하나는 3 개 개의 매개 변수를 가지고 참조 transclude. 문서가 제공하는 유일한 설명은 다음과 같습니다.

transclude-transclude 연결 함수 : function (scope, cloneLinkingFn).

복제 연결 기능에서 정확히 무엇을하는지 이해하려고합니다. 어떤 매개 변수가 전달되는지조차 모릅니다. HTML 요소로 보이는 매개 변수가 하나있는 예제 를 찾았습니다 clone. 사용 가능한 다른 매개 변수가 있습니까? 정확히 어떤 HTML 요소입니까? 나는 또한 아마도 transclude: 'element'내 지시문에서 사용 하고 있습니다. 'element'대신 사용할 때 이러한 질문에 대한 답변이 변경 true됩니까?

나는 간단한 예제로 초월을 이해하고 있지만, 특히 .NET에서 더 복잡한 예제를 찾을 수없는 것 같습니다 transclude: 'element'. 나는 누군가가이 모든 것에 대해 더 철저한 설명을 제공 할 수 있기를 바랍니다. 감사.

---

편집 : 완전히 그리고 완전히 내 대답을 변경하고 이것을 "커뮤니티 위키"(나에게 포인트가 없음을 의미)로 표시합니다.

@Jonah가 아래에서 지적했듯이, 여기에 지시어의 컴파일 옵션과 transclusion 함수 사용에 대한 정말 좋은 기사가 있습니다.

기본 아이디어는 컴파일 함수가 연결 함수를 반환해야한다는 것입니다. 연결 함수 내에 제공된 transclusion 함수를 사용하여 transcluded DOM 요소의 복제본을 가져 와서 컴파일 한 후 삽입해야하는 곳에 삽입 할 수 있습니다.

Plunker에서 내 엉덩이를 뽑아 낸 더 나은 예가 있습니다.

컴파일 함수의 개념은 연결 함수가 생성되고 호출되기 전에 전달 된 속성을 기반으로 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