एनजी-ट्रांसक्लूड क्या है?

266

मैंने स्टैकऑवरफ्लो पर कई सवालों को देखा है जो एनजी-ट्रांसक्लूड पर चर्चा कर रहा है, लेकिन आम आदमी के संदर्भ में कोई भी नहीं बता रहा है कि यह क्या है।

प्रलेखन में विवरण इस प्रकार है:

वह निर्देश जो निकटतम माता-पिता के पारगमन के ट्रांसकोडेड डोम के लिए सम्मिलन बिंदु को चिह्नित करता है जो ट्रांसकॉक्शन का उपयोग करता है।

यह काफी भ्रामक है। क्या कोई व्यक्ति सरल शब्दों में समझा सकता है कि एनजी-ट्रांसकल्डी का क्या करने का इरादा है और इसका उपयोग कहां किया जा सकता है?

angularjs angularjs-directive transclusion

— कोड व्हिस्परर
स्रोत

यह मूल रूप से एक विशेष रूप से HTML टैग या निर्देश के लिए जो भी आप सम्मिलित कर रहे हैं, उसके लिए एक अंकन बिंदु है। इसे एक निर्देश के साथ उपयोग करें और आप इसे बेहतर समझेंगे।

— ज़ा

जवाबों:

492

Transclude मार्कअप में निर्देश के अंदर डाली गई हर चीज को पकड़ने के लिए कोणीय बताने के लिए एक सेटिंग है और इसे निर्देश के टेम्पलेट में कहीं _{(जहां वास्तव में ng-transcludeहै पर)} का उपयोग करें। निर्देशन के प्रलेखन पर अन्य तत्वों अनुभाग को लपेटता है कि एक निर्देश बनाने के तहत इसके बारे में और पढ़ें ।

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

angular.module('app', [])
  .directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

यदि आप इसे अपने मार्कअप में रखते हैं

<hero name="superman">Stuff inside the custom directive</hero>

यह इस तरह दिखाई देगा:

अतिमानव

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

पूर्ण उदाहरण:

Index.html

<body ng-app="myApp">
  <div class="AAA">
   <hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>

jscript.js

angular.module('myApp', []).directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Output markup

कल्पना करें:

— बेन फिशर
स्रोत

यह उनके आधिकारिक डॉक्स की तुलना में बहुत बेहतर विवरण है। कि मेरे सिर में चोट लगी है।

— कैपज

बहुत बढ़िया जवाब! :) आपके द्वारा साझा किया गया लिंक मुझे इस प्रक्रिया को समझने में मदद करता है transclude।

— पाउलो ओलिवेरा

कोणीय को इस स्पष्टीकरण का उपयोग उन डॉक्स के बजाय करना चाहिए जो वर्तमान में उनके पास हैं।

— जेरेमी डब्ल्यू

@codeofnode अपनी कोणीय संकलन सेवा, यहाँ प्रासंगिक कोड github.com/angular/angular.js/blob/…

— बेन फिशर

Stackoverflow के उत्तर कोणीय अवधारणाओं को

— रेखांकित

यह एक प्रकार का पैदावार है, तत्व.html () से सब कुछ वहाँ प्रदान किया जाता है, लेकिन निर्देशकीय विशेषताएँ अभी भी निश्चित दायरे में दिखाई देती हैं।

— सोरबू निकोला-सीज़र
स्रोत

शीर्ष उत्तर I रेकॉन एकदम सही है, लेकिन अगर आप रूबी पृष्ठभूमि से आ रहे हैं तो मैं मानता हूं, yieldएक अच्छा सादृश्य लगता है।

— एपि

@Aea हाँ, मैं एक रूबी पृष्ठभूमि से आता हूं

— Solarbu निकोले-सीज़र