निर्देश लिंक फ़ंक्शन फ़ंक्शन के ट्रांज़ेक्शन फ़ंक्शन में, "भविष्य में माता-पिता" का उपयोग कैसे किया जाता है?

Question

angular documentation for the compile service (starting at line 412) में एक निर्देश के लिंकिंग फ़ंक्शन में पारित ट्रांज़ेक्शन फ़ंक्शन का विवरण दिया गया है।

प्रासंगिक हिस्सा पढ़ता है:

function([scope], cloneLinkingFn, futureParentElement) 

जो में (लाइन 212):

futureParentElement: cloneLinkingFn क्लोन तत्वों को जोड़ने जाएगा जो करने के लिए माता-पिता को परिभाषित करता है।

• डिफ़ॉल्ट: $element.parent() resp। $elementtransclude:'element' resp के लिए। transclude:true।

• केवल transcludes कि गैर HTML तत्वों (जैसे एसवीजी तत्वों) और जब cloneLinkinFn पारित हो जाता है, उन तत्वों के रूप में बनाया गया है और एक विशेष तरीके से क्लोन करने के लिए जब वे अपने सामान्य बाहर परिभाषित कर रहे हैं की जरूरत है शामिल करने के लिए अनुमति दी जाती है के लिए आवश्यक कंटेनर (उदाहरण के लिए <svg>)।

• directive.templateNamespace संपत्ति भी देखें।

मैं तथापि futureParentElement की बात को देखने के लिए असफल। यह कहता है

माता-पिता को परिभाषित करता है जिस पर क्लोनलिंकिंगएफएन क्लोन तत्व जोड़ देगा।

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

और तुम transclude समारोह पहली जगह में क्लोनिंग समारोह को परिभाषित करने के बिना उपयोग नहीं कर सकते:

लेकिन आपको लगता है कि cloneLinkingFn ही इस तरह का है।

futureParentElement के लिए उचित उपयोग/उपयोग क्या है?

Answer 1

इसका जवाब git blame of compile.js को देखकर पाया जा सकता है: प्रतिबद्ध है कि जोड़ा futureParentElementhttps://github.com/angular/angular.js/commit/ffbd276d6def6ff35bfdb30553346e985f4a0de6

प्रतिबद्ध में एक परीक्षण है कि एक निर्देश 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); 
    } 
    }; 
}); 

परीक्षण द्वारा परीक्षण होती है कैसे एचटीएमएल संकलन <svg-custom-transclude-container><circle cx="2" cy="2" r="1"></circle> बर्ताव करता है:

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

तो ऐसा लगता है कि आप एक निर्देश के साथ एक एसवीजी छवि बना रहे हैं जिसका टेम्पलेट <svg> ... </svg> टैग में स्थानांतरित एसवीजी सामग्री को लपेटता है, तो एसवीजी छवि मान्य नहीं होगी (कुछ परिभाषाओं से), यदि आप सही futureParentElement से $transclude पास नहीं करते हैं ।

यह देखने का प्रयास कर रहा है कि वास्तव में इसका मतलब क्या नहीं है, स्रोत कोड में परीक्षण से परे, मैंने इकाई परीक्षण में उन लोगों के आधार पर 2 निर्देश बनाए, और आंशिक सर्कल के साथ एक एसवीजी छवि बनाने की कोशिश करने के लिए उन्हें इस्तेमाल किया । एक futureParentElement का उपयोग कर:

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

और एक कि समान है, लेकिन वह नहीं करता है:

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

रूप http://plnkr.co/edit/meRZylSgNWXhBVqP1Pa7?p=preview में देखा जा सकता, futureParentElement के साथ एक आंशिक चक्र, और एक से पता चलता बिना नहीं डीओएम की संरचना समान दिखाई देती है। हालांकि क्रोम रिपोर्ट करता है कि दूसरा circle तत्व एक एसवीजी नोड नहीं है, लेकिन एक सादा HTML नोड है।

तो जो भी futureParentElement वास्तव में हुड के नीचे होता है, ऐसा लगता है कि अवरुद्ध एसवीजी सामग्री ब्राउज़र द्वारा एसवीजी के रूप में संभाली जा रही है।