एंगुलरजेएस: मैनुअल $ संकलन बनाम प्राकृतिक $ संकलन एक रिकर्सिव निर्देश

Question

पर मैंने संकलन के साथ अपना खुद का रिकर्सिव निर्देश बनाने की कोशिश की है, जिसे एक सुंदर JSON प्रारूप के साथ एक ऑब्जेक्ट को बदलने के लिए स्वयं को कॉल करने के लिए कहा जाता है। खैर, पहले मैंने टेम्पलेट के साथ एक स्क्रिप्ट को कॉल करने में एक एनजी-शामिल किया था, जिसमें एनजी-अगर इसके अंदर सत्यापन होता है तो वर्तमान मूल्य एक ऑब्जेक्ट था, यदि है, तो टेम्पलेट स्वयं ही कॉल करें।

मुझे हमेशा लगता है कि यह ऐसा करने का एक असभ्य तरीका है, इसलिए मैं एक निर्देश में बदल जाता हूं, और अधिक सरल।

अधिक से कम ... क्योंकि मैं रिकर्सिव निर्देशों की दुनिया की खोज करता हूं और बहुत सारी चीजें पाता हूं, और सबसे दिलचस्प। मैंने इसे गिटूब में कोणीय के स्रोत कोड में भी पढ़ा (मैं आपको पढ़ने के लिए अनुशंसा करता हूं: https://github.com/angular/angular.js), एक अच्छी चीजें थीं।

मैंने इतनी मेहनत की खोज की, और मुझे लगता है कि मैं लगभग अजीब खोज रहा हूं जो मेरे दिल की देखभाल करेगा! क्योंकि मैं बहुत सी नई चीजें सीखता हूं और आप लोग मेरी मदद करेंगे। https://github.com/Daymannovaes/htmljs/blob/master/js/directives/recursiveDataTemplateDirective.js

मेरी निर्देश दिए गए हैं:: पुनरावर्ती-डेटा-टेम्पलेट = "डाटा", जहां डाटा एक उद्देश्य है

नीचे दिए गए लिंक में मेरी कोड देखो। यह निर्देश इस ऑब्जेक्ट की कुंजी और मानों पर लूप करेगा, और यदि मान एक ऑब्जेक्ट था, तो यह फिर से करेगा। स्थिति ng-if = "isObject (value)" के साथ बनाई गई है।

ठीक है, मेरी पहली समस्या अनंत लूप थी। मुझे संकलन चरण में सामग्री को हटाने की आवश्यकता है और फिर पोस्टलिंक चरण में सामग्री को अनिवार्य रूप से संकलित करने की आवश्यकता है। मेरा प्रश्न: ** मैन्युअल संकलन अनंत लूप की एक ही समस्या पर क्यों नहीं पड़ता है? **

मैं एक ही सामग्री को संकलित कर रहा हूं, कोई शर्त नहीं बनाई गई है (यदि if (! CompiledContent) हटा दिया गया था, अनंत लूप अभी भी नहीं हो रहा है), दुविधा (मुझे लगता है) केवल वे अलग-अलग हैं जगह, लेकिन मैं इंटरनेट पर किसी ऐसे व्यक्ति को नहीं ढूंढ पा रहा था जो मेरा प्रश्न पूछता है!

तो, धन्यवाद! (यदि लिंक काम नहीं करता है, यहां महत्वपूर्ण कोड हैं):

compile: function(templateElement, templateAttributes) { 
      /* 
       in compile time, we need to remove the innerHTML of template(url) because of its recursive. 
       Because of its recusiveness, when the $compile start to read the DOM tree and find a 
       recursiveDataTemplate directive (even its not will be evaluated all time by link function 
       because the ng-if, whatever) its start the do all the process again. So, we need the .remove() 
      */ 
      var templateDirectiveContent = templateElement.contents().remove(); 
      var compiledContent; 

      return function($scope, linkElement, linkAttributes) { 

       /* 
        This verification avoid to compile the content to all siblings, because 
        when you compile the siblings, don't work (I don't know why, yet). 
        So, doing this we get only the top level link function (from each iteration) 
       */ 
       if(!compiledContent) { 
        compiledContent = $compile(templateDirectiveContent); 
       } 

       /* 
        Calling the link function passing the actual scope we get a clone object 
        wich contains the finish viewed object, the view itself, the DOM!! 
        Then, we attach the new dom in the element wich contains the directive 
       */ 
       compiledContent($scope, function(clone) { 
        linkElement.append(clone); 
       }); 
      }; 
     }, 
    } 

<ul> 
    <li data-ng-repeat="(key, value) in fields"> 
     <span data-ng-if="!isNumber(key)"> 
      {{key}}: 
     </span> 

     <span data-ng-if="isObject(value)" recursive-data-template="value"></span> 

     <span data-ng-if="!isObject(value)"> 
      {{value}} 
     </span> 

    </li> 
</ul> 

Answer 1

मेरा मानना ​​है कि official documentation से इस अंश को आप क्या कह रहे हैं प्रासंगिक है:

नोट: संकलन फ़ंक्शन उन निर्देशों को संभाल नहीं सकता है जो टी में पुनः उपयोग करते हैं वारिस अपने टेम्पलेट्स या संकलन कार्यों। इन निर्देशों को संकलित करने के परिणामस्वरूप अनंत लूप और एक स्टैक ओवरफ़्लो त्रुटियां होती हैं। फ़ंक्शन में स्वचालित रूप से $compile का उपयोग करके template या templateUrl संकलन फ़ंक्शन के अंदर घोषणा या मैन्युअल संकलन के माध्यम से स्वचालित टेम्पलेट संकलन पर निर्भर होने के बजाय निर्देशक के टेम्पलेट को संकलित करने के लिए इसे मैन्युअल रूप से निर्देशित करने के लिए $compile का उपयोग करके बचाया जा सकता है।

और कोड आपके द्वारा दिए गए से जा रहा है, क्या किया है करने के लिए क्या इस नोट का सुझाव दे रहा है लगता है - वह है, मैन्युअल रूप से समारोह (postLink) आप में से compile संपत्ति के लिए लौट रहे हैं अंदर संकलन अपने निर्देश।

Answer 2

कारण है कि compile चरण के बजाय postLink दौरान संकलन के बारे में अनंत प्रत्यावर्तन बचा जाता है, ऐसा इसलिए है क्योंकि सभी डोम के तत्वों, संकलित किए जाते हैं, जबकि link केवल तभी ट्रिगर होंगे मौसम वे वास्तव में उपयोग किया जाता है या नहीं है जब तत्व वास्तव में जुड़ा हुआ है: उदाहरण के लिए यदि उच्च ng-if झूठा है, तो इसके बच्चों के तत्व को पहले से लिंक नहीं किया जाएगा, और इस प्रकार neithr पोस्ट लिंक्ड ... कम से कम मेरी समझ से! http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/