Nella funzione di esclusione di una funzione di collegamento direttiva, come viene utilizzato "futureParentElement"?

Question

Nella angular documentation for the compile service (starting at line 412) c'è una descrizione della funzione di esclusione che viene passata nella funzione di collegamento di una direttiva.

La parte rilevante recita:

function([scope], cloneLinkingFn, futureParentElement) 

In quale (linea 212):

futureParentElement: definisce il genitore a cui il cloneLinkingFn aggiungerà gli elementi clonati.

• impostazione predefinita: $element.parent() risp. $element per transclude:'element' risp. transclude:true.

• richiesti solo per transcludes che sono autorizzati a contenere elementi non html (es elementi SVG) e quando viene passato il cloneLinkinFn, cui tali elementi devono creato e clonato in modo particolare quando sono definiti all'esterno loro abituale contenitori (es. come <svg>).

• Vedere anche la proprietà directive.templateNamespace.

Non riesco a vedere il punto di futureParentElement però. Dice

definisce il genitore a cui cloneLinkingFn aggiungerà gli elementi clonati.

ma si fa che in sé cloneLinkingFn in questo modo:

transclude(scope, function (clone) { 
    some_element.append(clone); 
}); 

e non è possibile utilizzare la funzione transclude senza definire la funzione di clonazione, in primo luogo.

Qual è l'utilizzo/utilizzo corretto per futureParentElement?

Answer 1

La risposta a questa può essere trovata guardando il il git blame of compile.js: il commit che ha aggiunto futureParentElement è https://github.com/angular/angular.js/commit/ffbd276d6def6ff35bfdb30553346e985f4a0de6

Nel commettere v'è un test che mette alla prova una direttiva svgCustomTranscludeContainer

directive('svgCustomTranscludeContainer', function() { 
    return { 
    template: '<svg width="400" height="400"></svg>', 
    transclude: true, 
    link: function(scope, element, attr, ctrls, $transclude) { 
     var futureParent = element.children().eq(0); 
     $transclude(function(clone) { 
     futureParent.append(clone); 
     }, futureParent); 
    } 
    }; 
}); 

da test come compilare il codice html <svg-custom-transclude-container><circle cx="2" cy="2" r="1"></circle> si comporta:

it('should handle directives with templates that manually add the transclude further down', inject(function() { 
    element = jqLite('<div><svg-custom-transclude-container>' + 
     '<circle cx="2" cy="2" r="1"></circle></svg-custom-transclude-container>' + 
     '</div>'); 
    $compile(element.contents())($rootScope); 
    document.body.appendChild(element[0]); 

    var circle = element.find('circle'); 
    assertIsValidSvgCircle(circle[0]); 
})); 

Pertanto, se si sta creando un'immagine SVG con una direttiva il cui modello include il contenuto SVG escluso nei tag <svg> ... </svg>, l'immagine SVG non sarà valida (secondo alcune definizioni), se non si passa il futureParentElement corretto a $transclude .

Cercando di vedere cosa significa in realtà non essere valido, oltre il test nel codice sorgente, ho creato 2 direttive in base a quelle del test dell'unità e le ho utilizzate per provare a creare un'immagine SVG con un cerchio parziale . Uno utilizzando il futureParentElement:

<div><svg-custom-transclude-container-with-future><circle cx="1" cy="2" r="20"></circle></svg-custom-transclude-container></div> 

e uno che è identica ma che non fa:

<div><svg-custom-transclude-container-without-future><circle cx="2" cy="2" r="20"></circle></svg-custom-transclude-container></div> 

Come si vede in http://plnkr.co/edit/meRZylSgNWXhBVqP1Pa7?p=preview, quello con il futureParentElement mostra il cerchio parziale, e quello senza non. La struttura del DOM appare identica. Tuttavia, Chrome sembra segnalare che il secondo elemento circle non è un nodo SVG, ma un semplice nodo HTML.

Quindi, qualsiasi cosa sia futureParentElement effettivamente sotto il cofano, sembra assicurarsi che il contenuto SVG incluso possa essere gestito dal browser come SVG.