Angular में Transclude 'true' और Transclude 'एलिमेंट' का उपयोग कब करें?

Question

मुझे कब transclude: 'true'और transclude: 'element'कैसे उपयोग करना चाहिए ? मुझे transclude: 'element'कोणीय डॉक्स में कुछ भी नहीं मिल रहा है , वे बहुत भ्रमित हैं।

मुझे खुशी होगी अगर कोई इसे सरल भाषा में समझा सके। प्रत्येक विकल्प का क्या लाभ है? उनके बीच वास्तविक अंतर क्या है?

यह वही है जो मैंने पाया है:

transclude: true

एक संकलित फ़ंक्शन के अंदर, आप ट्रांसकॉल्यूड लिंकिंग फ़ंक्शन की सहायता से DOM को हेरफेर कर सकते हैं या किसी HTML टैग पर ngTransclude निर्देश का उपयोग करके ट्रांसकोड किए गए DOM को टेम्पलेट में सम्मिलित कर सकते हैं।

तथा

transclude: ‘element’

यह संपूर्ण तत्व को स्थानांतरित करता है और संकलित फ़ंक्शन में एक ट्रांसक्लूड लिंकिंग फ़ंक्शन पेश किया जाता है। आप यहाँ स्कोप तक नहीं पहुँच सकते क्योंकि स्कोप अभी बना नहीं है। कंपाइल फंक्शन उस निर्देश के लिए एक लिंक फंक्शन बनाता है, जिसमें स्कोप तक पहुंच होती है और transcludeFn आपको DOM मैनिपुलेशन के लिए क्लोन किए गए एलिमेंट (जो कि ट्रांसकल्ड किया गया था) को छूने देता है या इसमें स्कोप के लिए बाध्य डेटा का उपयोग करता है। आपकी जानकारी के लिए, यह एनजी-रिपीट और एनजी-स्विच में उपयोग किया जाता है।

Answer 1

निर्देशों पर AngularJS प्रलेखन से :

transclude- तत्व की सामग्री को संकलित करें और इसे निर्देशन के लिए उपलब्ध करें। आमतौर पर ngTransclude के साथ प्रयोग किया जाता है। ट्रांसकॉक्शन का लाभ यह है कि लिंकिंग फ़ंक्शन को ट्रांसकॉक्शन फ़ंक्शन प्राप्त होता है जो सही दायरे के लिए पूर्व-बाध्य है। एक विशिष्ट सेटअप में विजेट एक अलग गुंजाइश बनाता है, लेकिन ट्रांसकॉक्शन एक बच्चा नहीं है, लेकिन अलग-अलग गुंजाइश का एक भाई है। यह विजेट के लिए निजी स्थिति और माता-पिता (पूर्व-पृथक) दायरे से बंधे होने के लिए ट्रांसकॉर्पोरेशन संभव बनाता है।

true - निर्देश की सामग्री को स्थानांतरित करें।

'element' - कम प्राथमिकता पर परिभाषित किसी भी निर्देश सहित पूरे तत्व को स्थानांतरित करें।

transclude: सच

तो मान लीजिए कि आपके पास एक निर्देश है जिसे इस तरह से my-transclude-trueघोषित किया गया transclude: trueहै:

<div>
  <my-transclude-true>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-true>
</div>

संकलित करने और लिंक करने से पहले यह हो जाता है:

<div>
  <my-transclude-true>
    <!-- transcluded -->
  </my-transclude-true>
</div>

सामग्री (बच्चों) के my-transclude-trueजो है <span>{{ something }}</span> {{..., transcluded और निर्देश के लिए उपलब्ध है।

transclude: 'तत्व'

यदि आपके पास एक निर्देश है जिसे इस तरह से my-transclude-elementघोषित किया गया transclude: 'element'है:

<div>
  <my-transclude-element>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-element>
</div>

संकलित करने और लिंक करने से पहले यह हो जाता है:

<div>
   <!-- transcluded -->
</div>

यहां, इसके बच्चों सहित पूरे तत्व को स्थानांतरित कर दिया जाता है और निर्देश को उपलब्ध कराया जाता है।

लिंक करने के बाद क्या होता है?

यह आपके निर्देश पर निर्भर करता है कि इसे ट्रांसकॉल्ड फ़ंक्शन के साथ क्या करना है। ngRepeatउपयोग करता है transclude: 'element'ताकि गुंजाइश बदलने पर यह पूरे तत्व और उसके बच्चों को दोहरा सके। हालांकि, अगर आपको केवल टैग को बदलने की आवश्यकता है और इसे सामग्री को बनाए रखना चाहते हैं, तो आप transclude: trueउस ngTranscludeनिर्देश का उपयोग कर सकते हैं जो आपके लिए ऐसा करता है।

Comments

मैं थोड़े made available to the directiveबयान से चूक गया । तत्व हमेशा निर्देश के लिए उपलब्ध है। क्या आप इस बारे में विस्तार से बता सकते हैं?

— लड़का मोगरबी

@guymograbi यह वाक्य " सही दायरे में पूर्व-बद्ध फ़ंक्शन के माध्यम से निर्देश को उपलब्ध कराए जाने के रूप में अधिक समझ में आता है ।"

— मिशेल टिली

एक इकाई 'एलिमेंट' के बराबर ट्रांसक्लूडे के साथ एक निर्देश का परीक्षण कैसे करेगी? मैं वर्तमान में उस समस्या से जूझ रहा हूं। मैं तत्व को एक्सेस करने के बाद इसे एक्सेस करने के लिए प्रतीत नहीं कर सकता।

— चेस्टर रिवास

Answer 2

जब सही पर सेट किया जाता है, तो निर्देश मूल सामग्री को हटा देगा, लेकिन इसे एनजी-ट्रांसक्लूड नामक एक निर्देश के माध्यम से अपने टेम्पलेट के भीतर पुनर्संरचना के लिए उपलब्ध कराएगा।

appModule.directive('directiveName', function() {
    return {
      template: '<div>Hello there <span ng-transclude></span></div>',
      transclude: true
    };
});


<div directive-name>world</div>

ब्राउज़र रेंडर: "नमस्ते नमस्ते दुनिया।"

Comments

यह इस सवाल का बिल्कुल भी जवाब नहीं देता है (जो कि अंतर के बारे में था ) transclude: trueऔरtransclude: element

— जैस्पर

यह भी दिलचस्प होगा कि ब्राउज़र डोम के निर्देश के बाद क्या टैग करता है, न कि यह क्या पढ़ता है ...

— kontur

Answer 3

ट्रांसकॉर्पोरेशन के बारे में सोचने का सबसे अच्छा तरीका एक पिक्चर फ्रेम है। पिक्चर फ्रेम का अपना एक डिज़ाइन होता है और पिक्चर को जोड़ने के लिए एक स्पेस होता है। हम तय कर सकते हैं कि इसके अंदर कौन सी पिक्चर जाएगी।

जब यह कोणीय की बात आती है, तो हमारे पास इसके दायरे के साथ कुछ प्रकार के नियंत्रक हैं और इसके अंदर हम एक निर्देश देंगे जो ट्रांसकॉक्शन का समर्थन करता है। इस निर्देश में इसका प्रदर्शन और कार्यक्षमता होगी। गैर-संचरित निर्देशन में, निर्देश के अंदर की सामग्री निर्देशन द्वारा ही तय की जाती है, लेकिन अंतरण के साथ, चित्र फ़्रेम की तरह, हम यह तय कर सकते हैं कि निर्देश के अंदर क्या होगा।

angular.module("app").directive('myFrame', function () {
    return {
        restrict: 'E',
        templateUrl:"frame.html",
        controller:function($scope){
          $scope.hidden=false;
          $scope.close=function(){
            $scope.hidden=true;

          }
        },
        transclude:true


    }

});

निर्देश के अंदर की सामग्री

<div class="well" style="width:350px;" ng-hide="hidden">

  <div style="float:right;margin-top:-15px">
    <i class="glyphicon glyphicon-remove" ng-click="close()" style="cursor:pointer"></i> 
  </div>
  <div ng-transclude>
    /*frame content goes here*/
  </div>
</div>

निर्देशक को बुलाओ

<body ng-controller="appController">
    <my-frame>
      <span>My Frame content</span>
    </my-frame>
  </body>

उदाहरण

Comments

फिर भी मैं ट्रांसक्लूड को समझ नहीं पाया, क्या आपके पास इसे चित्रित करने का कोई सरल कार्यक्रम हो सकता है?

— राजा