2014-07-13 6 views
226

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

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

दस्तावेज में विवरण इस प्रकार है।

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

+1

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

उत्तर

430

Transclude एक सेटिंग सब कुछ है कि मार्कअप में निर्देश के अंदर डाला जाता है पर कब्जा करने के कोणीय बता और उपयोग करने के लिए है इसे कहीं (कहाँ वास्तव में ng-transclude पर है) के निर्देश के टेम्पलेट मेंके तहत इस बारे में और पढ़ें, एक निर्देश बनाना जो अन्य तत्वों को अनुभाग documentation of directives पर लपेटता है।

आप एक कस्टम निर्देश लिखते हैं तो आप बिंदु चिह्नित करने के लिए निर्देश टेम्पलेट में एनजी-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

enter image description here

कल्पना:

enter image description here

+71

यह उनके आधिकारिक दस्तावेज़ों की तुलना में बहुत बेहतर विवरण है। वह मेरा सिर चोट पहुंचाता है। – Capaj

+3

महान उत्तर! :) आपके द्वारा साझा किया गया लिंक मुझे 'ट्रांसफर' की प्रक्रिया को समझने में मदद करता है। –

+9

कोणीय को वर्तमान में मौजूद दस्तावेज़ों के बजाय इस स्पष्टीकरण का उपयोग करना चाहिए। –

3

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

+8

आपने स्पष्टीकरण को स्पष्ट करने के लिए कुछ भी नहीं जोड़ा है ... –

+3

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

+2

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

संबंधित मुद्दे