O que exatamente você faz com a function transclude e a function de vinculação de clone?

Da diretiva Angular docs , vejo que a function compilar tem 3 parâmetros, um dos quais é transclude . A única explicação que os documentos fornecem é:

transclude – Uma function de binding de transclude: function (scope, cloneLinkingFn).

Estou tentando entender exatamente o que você faria na function de vinculação de clone. Eu nem sei quais parâmetros são passados ​​para ele. Eu encontrei um exemplo que tem um parâmetro chamado clone que parece ser um elemento HTML. Existem outros parâmetros disponíveis? Qual elemento HTML é exatamente isso? Eu também estou olhando provavelmente usando transclude: 'element' na minha diretiva. As respostas a essas perguntas mudam ao usar 'element' vez de true ?

Estou entendendo a transclusão com exemplos simples, mas não consigo encontrar exemplos mais complexos, especialmente com transclude: 'element' . Espero que alguém possa fornecer uma explicação mais completa sobre tudo isso. Obrigado.

EDIT: Completa e totalmente mudando minha resposta e marcando isso como “Community Wiki” (ou seja, sem pontos para mim) como eu estava completamente errado quando eu respondi isso

Como @Jonah apontou abaixo, aqui está um artigo realmente bom sobre a opção de compilation de diretivas e usando a function de transclusão

A idéia básica é que a function de compilation deve retornar uma function de vinculação. Você pode usar a function de transclusão fornecida dentro da function de vinculação para obter um clone do elemento DOM transcluído, compilá-lo e inseri-lo sempre que precisar ser inserido.

Aqui está um exemplo melhor que eu tirei da minha bunda em Plunker

A idéia da function de compilation é que você tem a chance de alterar programaticamente os elementos DOM com base nos atributos passados ​​ANTES que a function de vinculação seja criada e chamada.

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