Che cosa fai esattamente con la funzione di esclusione e la funzione di collegamento clone?

Dalla direttiva Angular docs , vedo che la funzione compile ha 3 parametri, uno dei quali è transclude . L’unica spiegazione fornita dai documenti è:

transclude – Una funzione di collegamento transclude: function (scope, cloneLinkingFn).

Sto cercando di capire cosa esattamente faresti nella funzione di collegamento clone. Non so nemmeno quali parametri vengono passati in esso. Ho trovato un esempio che ha un parametro chiamato clone che sembra essere un elemento HTML. Ci sono altri parametri disponibili? Quale elemento HTML è esattamente questo? Sto anche guardando probabilmente usando transclude: 'element' nella mia direttiva. Le risposte a queste domande cambiano quando si usa 'element' invece di true ?

Sto capendo la transclusione con i semplici esempi, ma non riesco a trovare esempi più complessi, specialmente con transclude: 'element' . Spero che qualcuno possa fornire una spiegazione più approfondita su tutto questo. Grazie.

EDIT: Completamente e totalmente cambiando la mia risposta e segnando questo come “Community Wiki” (che significa nessun punto per me) come ero completamente sbagliato quando ho risposto a questo

Come sottolineato da @Jonah in basso, ecco un articolo davvero valido sull’opzione di compilazione delle direttive e sull’uso della funzione di inclusione

L’idea di base è che la funzione di compilazione dovrebbe restituire una funzione di collegamento. Puoi usare la funzione di transclusione fornita all’interno della funzione di collegamento per prendere un clone dell’elemento DOM transcluso, compilarlo e inserirlo ovunque debba essere inserito.

Ecco un esempio migliore che ho tirato fuori dal mio culo su Plunker

L’idea della funzione di compilazione ti dà la possibilità di modificare gli elementi DOM in modo programmato in base agli attributi passati PRIMA che la funzione di collegamento sia stata creata e chiamata.

 // 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('
DEBUG ENABLED {{showDebug}}
'); } 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('
'); // 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('{{key}}: {{value}}'); } //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); } }); }; } }; });