Was genau machen Sie mit der Transclude-Funktion und der Klonverknüpfungsfunktion?

Aus der Direktive Angular docs geht hervor , dass die Kompilierungsfunktion drei Parameter hat, von denen einer ist transclude. Die einzige Erklärung, die die Dokumente liefern, ist:

transclude - Eine Transclude-Verknüpfungsfunktion: function (scope, cloneLinkingFn).

Ich versuche zu verstehen, was genau Sie in der Klonverknüpfungsfunktion tun würden. Ich weiß nicht einmal, welche Parameter übergeben werden. Ich habe ein Beispiel gefunden , dessen Parameter cloneein HTML-Element zu sein scheint. Gibt es andere Parameter? Welches HTML-Element ist das genau? Ich schaue auch wahrscheinlich transclude: 'element'in meiner Direktive zu verwenden. Ändern sich die Antworten auf diese Fragen bei der Verwendung 'element'anstelle von true?

Ich verstehe die Transklusion mit den einfachen Beispielen, aber ich kann anscheinend keine komplexeren Beispiele finden, insbesondere mit transclude: 'element'. Ich hoffe, jemand kann eine gründlichere Erklärung zu all dem geben. Vielen Dank.

BEARBEITEN: Ich habe meine Antwort vollständig und vollständig geändert und dies als "Community-Wiki" markiert (was für mich keine Punkte bedeutet), da ich mich völlig geirrt habe, als ich darauf geantwortet habe

Wie @Jonah unten ausgeführt hat, ist hier ein wirklich guter Artikel über die Kompilierungsoption von Direktiven und die Verwendung der Transclusionsfunktion

Die Grundidee ist, dass die Kompilierungsfunktion eine Verknüpfungsfunktion zurückgeben sollte. Mit der in der Verknüpfungsfunktion bereitgestellten Transclusionsfunktion können Sie einen Klon des transkludierten DOM-Elements erstellen, kompilieren und überall dort einfügen, wo es eingefügt werden muss.

Hier ist ein besseres Beispiel, das ich auf Plunker aus meinem Hintern gezogen habe

Die Idee der Kompilierungsfunktion besteht darin, dass Sie die DOM-Elemente basierend auf Attributen, die übergeben wurden, bevor die Verknüpfungsfunktion erstellt und aufgerufen wird, programmgesteuert ändern können.

// 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);
          }
        });
      };
    }
  };
});