निर्देश परिभाषा की ट्रांसक्लूडे विकल्प को समझना?

Question

मुझे लगता है कि यह मुझे angularjs के निर्देश के साथ समझने के लिए सबसे कठिन अवधारणा है।

Http://docs.angularjs.org/guide/directive से दस्तावेज़ कहते हैं:

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

• सच - निर्देश की सामग्री को ट्रांसक्लूड करें।
• lud एलिमेंट ’- कम प्राथमिकता पर परिभाषित किसी भी निर्देश सहित पूरे तत्व को स्थानांतरित करें।

यह transcludeआमतौर पर के साथ प्रयोग किया जाता है कहते हैं ngTransclude। लेकिन ngTransclude के दस्तावेज़ से नमूना बिल्कुल भी ngTranscludeनिर्देश का उपयोग नहीं करता है ।

मुझे यह समझने में मदद करने के लिए कुछ अच्छे उदाहरण चाहिए। हमें इसकी जरूरत क्यों है? क्या हल करता है? इसे कैसे उपयोग करे?

Comments

FYI करें ... लिंक कम से कम अब काम कर रहा है

— सैंडी

Answer 1

एक तत्व में myDirective नामक एक निर्देश पर विचार करें , और वह तत्व किसी अन्य सामग्री को संलग्न कर रहा है, आइए बताते हैं:

<div my-directive>
    <button>some button</button>
    <a href="#">and a link</a>
</div>

यदि MyDirective एक टेम्पलेट का उपयोग कर रहा है, तो आप देखेंगे कि सामग्री की <div my-directive>जगह आपके निर्देश टेम्पलेट द्वारा ले ली जाएगी। तो होने:

app.directive('myDirective', function(){
    return{
        template: '<div class="something"> This is my directive content</div>'
    }
});

इस रेंडर में परिणाम होगा:

<div class="something"> This is my directive content</div> 

ध्यान दें कि आपके मूल तत्व की सामग्री <div my-directive> खो जाएगी (या बेहतर कहा गया है, प्रतिस्थापित)। इसलिए, इन मित्रों को अलविदा कहें:

<button>some button</button>
<a href="#">and a link</a>

तो, क्या होगा यदि आप अपने <button>...और <a href>...डोम को रखना चाहते हैं ? आपको ट्रांसकॉक्शन नाम की चीज़ की आवश्यकता होगी। अवधारणा बहुत सरल है: सामग्री को एक स्थान से दूसरे स्थान पर शामिल करें । तो अब आपका निर्देश कुछ इस तरह दिखाई देगा:

app.directive('myDirective', function(){
    return{
        transclude: true,
        template: '<div class="something"> This is my directive content</div> <ng-transclude></ng-transclude>'
    }
});

यह प्रस्तुत करना होगा:

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>. 

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

मेरा कोड उदाहरण यहाँ है । इसे देखकर आपको भी फायदा हो सकता है ।

Comments

ऐसा लगता है कि उन्होंने कार्यक्षमता को थोड़ा बदल दिया है। कम से कम संस्करण में = = 1.2.9। टेम्पलेट से सामग्री प्रदान की गई सामग्री में नहीं जोड़ी गई है। नीचे @ TechExplorer का उत्तर देखें

— तरजी रोमितव

एक बहुत, बहुत अच्छा जवाब। सामान्य से ऊपर का रास्ता। आपके पास अच्छे उदाहरण हैं, और आपके "यह मेरी निर्देशन सामग्री है" ने प्रदान किए गए संस्करण में पढ़ना बहुत आसान बना दिया है। मुझे समझ नहीं आ रहा है कि कोणीय को जटिल शब्दावली और अवधारणाओं का उपयोग क्यों करना है और फिर आपके जैसे आसान-से-समझने वाले उदाहरणों को शामिल नहीं करना है। +2

— 8

क्या किसी को पता है कि क्या ट्रांसकोड की गई सामग्री निर्देशांक के अलग-अलग क्षेत्र को संदर्भित कर सकती है? यह ऊपर कहा गया है कि ट्रांसकॉर्पोरेशन एक सहोदर है, एक बच्चा नहीं है, अलग-अलग गुंजाइश है ... इसलिए मैं मान रहा हूं कि यह नहीं हो सकता है - लेकिन सोच रहा था कि क्या कोई पुष्टि कर सकता है या मुझे बता सकता है कि क्या यह संभव है

— साइमन ग्रीन

@UladzimirHavenchyk धन्यवाद, वे वीडियो को दूसरी जगह ले गए। मैंने उसी के अनुसार लिंक तय किया।

— ओडीसियो

@odiseo, क्या आप इस तरह से अंग्रेजी को समझने के लिए सरल, सभी कोणीय डॉक्स को सादे में लिख सकते हैं! + कई 1 के।

— डैन हॉडसन

Answer 2

मुझे लगता है कि एंगुलरजेएस के नए संस्करण में उपरोक्त व्यवहार में बदलाव का उल्लेख करना महत्वपूर्ण है। मैंने कोणीय 1.2.10 के साथ उपरोक्त परिणाम प्राप्त करने की कोशिश में एक घंटा बिताया।

एनजी-ट्रांसक्लूड वाले तत्व की सामग्री को जोड़ा नहीं जाता है, लेकिन पूरी तरह से बदल दिया जाता है।

तो उपरोक्त उदाहरण में, आप 'ट्रांसक्लूड' के साथ क्या हासिल करेंगे:

<div class="something">
    <button>some button</button>
    <a href="#">and a link</a>
</div>

और नहीं

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>

धन्यवाद।

Comments

कोणीय 1.2 में परिवर्तित व्यवहार के बारे में अधिक जानकारी के लिए, eed299a परिवर्तन देखें ।

— मार्क राजकोक

Answer 3

TechExplorer जो कहता है वह सच है, लेकिन आपके टेम्पलेट में एनजी-ट्रांसक्लूड विशेषता के साथ एक साधारण कंटेनर टैग (जैसे डिव या स्पैन) शामिल करके आप दोनों सामग्री रख सकते हैं। इसका मतलब है कि आपके टेम्पलेट में निम्नलिखित कोड में सभी सामग्री शामिल होनी चाहिए

<div class="something"> This is my directive content <div class="something" ng-transclude></div></div>

Comments

यह महत्वपूर्ण जानकारी थी जो अन्य उत्तरों पर गायब थी

— मैथ्यूज

यह उत्तर इतनी जानकारी जोड़ता है। ng-transcludeवह विशेषता है जो स्थान धारक के रूप में कार्य करता है, जिसके अंदर ट्रांसकोड की गई सामग्री रखी जाएगी।

— बीइंगसुमन

Answer 4

विकी से:

"कंप्यूटर विज्ञान में, ट्रांसकॉन्सेक्शन एक या एक से अधिक अन्य दस्तावेज़ों में संदर्भ द्वारा भाग या सभी इलेक्ट्रॉनिक दस्तावेज़ का समावेश है।"

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

http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives-part-2-transclusion/

Answer 5

अपडेट किया गया AngularJS 1.6.6 प्रलेखन अब एक बेहतर व्याख्या है।

Transclude का उपयोग एक निर्देश बनाने के लिए किया जाता है जो अन्य तत्वों को लपेटता है

कभी-कभी यह एक स्ट्रिंग या एक वस्तु के बजाय पूरे टेम्पलेट में पारित करने में सक्षम होना वांछनीय है। मान लीजिए कि हम एक "संवाद बॉक्स" घटक बनाना चाहते हैं। संवाद बॉक्स किसी भी मनमानी सामग्री को लपेटने में सक्षम होना चाहिए।

ऐसा करने के लिए, हमें ट्रांसक्लूड विकल्प का उपयोग करना होगा । नीचे दिए गए उदाहरण का संदर्भ लें।

---

script.js

angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.name = 'Tobias';
}])
.directive('myDialog', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    templateUrl: 'my-dialog.html',
    link: function(scope) {
      scope.name = 'Jeff';
    }
  };
});

index.html

<div ng-controller="Controller">
  <my-dialog>Check out the contents, {{name}}!</my-dialog>
</div>

मेरी-dialog.html

<div class="alert" ng-transclude></div>

संकलित आउटपुट

<div ng-controller="Controller" class="ng-scope">
  <my-dialog class="ng-isolate-scope"><div class="alert" ng-transclude="">Check out the contents, Tobias!</div></my-dialog>
</div>

---

Transclude इस विकल्प के साथ एक निर्देश की सामग्री को अंदर के बजाय निर्देश के दायरे तक पहुंच बनाता है।

इसका उदाहरण पिछले उदाहरण में दिया गया है। ध्यान दें कि हमने script.js में एक लिंक फ़ंक्शन जोड़ा है जो जेफ के रूप में नाम को फिर से परिभाषित करता है। आमतौर पर, हम उम्मीद करेंगे कि {{नाम}} जेफ होगा। हालाँकि, हम इस उदाहरण में देखते हैं कि {{name}} बाइंडिंग अभी भी टोबियास है।

सर्वोत्तम अभ्यास : केवल transclude: trueतब उपयोग करें जब आप एक निर्देश बनाना चाहते हैं जो मनमानी सामग्री लपेटता है।

Answer 6

transclude: आपके निर्देश में आपके तत्व में परिभाषित सभी तत्व जोड़ने का सही अर्थ है।

यदि transclude: गलत इन तत्वों को आपके अंतिम HTML में शामिल नहीं किया जाता है केवल निर्देश का टेम्पलेट प्रदान किया जाता है।

transclude: तत्व का अर्थ है कि आपके निर्देश टेम्पलेट का उपयोग नहीं किया गया है केवल आपके निर्देश में परिभाषित तत्व html के रूप में प्रस्तुत किए गए हैं।

जब आप अपने निर्देश को परिभाषित करते हैं तो यह ई तक सीमित होना चाहिए और जब आप इसे पृष्ठ पर जोड़ते हैं

<my-directive><elements><my-directive>
<elements> is like <p>gratitude</p>
what i am talking about.