एंगुलरजेएस निर्देश, सामग्री लपेटें और मूल तत्व

Question

पर गुण रखें I AngularJS के लिए काफी नया है और अभी भी सीख रहा हूं।

मुझे उस निर्देश को बनाने में कुछ परेशानी है जो तत्व (और उसके बच्चों) को लपेटती है कि निर्देश लागू होता है। मुझे नहीं लगता कि यह आम तौर पर आम परिदृश्य इतनी मुश्किल क्यों होनी चाहिए कि एंगुलरजेएस में कई अन्य सामान्य चीजें कितनी आसान हैं, इसलिए यह बहुत अच्छा हो सकता है कि मुझे यहां कुछ याद आ रहा है।

मैं क्या करना चाहता हूं एक div में एक चयन तत्व लपेटना है। मैं मूल चयन तत्व और इसकी सामग्री को संरक्षित करने के लिए स्थानांतरित कर रहा हूं लेकिन मैं इसे सही तरीके से काम नहीं कर सकता।

एचटीएमएल इस तरह दिखता है:

<select mlb-select ng-options="opt.val as opt.text for opt in mlb" ng-model="mlbOpt"></select> 

... और मेरे निर्देश इस तरह दिखता है:

directiveModule.directive("mlbSelect", function(){ 
    return { 
     template: '<div class="mlb-select">' 
        + '<select ng-transclude></select>' 
        + '</div>', 
     transclude: 'element', 
     replace: true 
    } 
}); 

जिसके परिणामस्वरूप एचटीएमएल इस तरह दिखता है:

<div class="mlb-select ng-pristine ng-valid" mlb-select ng-options="opt.val as opt.text for opt in mlb" ng-model="mlbOpt"> 
    <select ng-transclude class="ng-scope"></select> 
</div> 

बेशक

, यह वह नहीं है जिसकी मुझे चाहत है। मेरे चयन तत्व के गुण रैपिंग div में क्यों जोड़े गए हैं और न कि तत्व जो मैं ng-transclude विशेषता के साथ निर्दिष्ट करता हूं? चयन तत्व को ng-options और ng-model गुणों को बनाए रखने की आवश्यकता है।

इसे पूरा करने के लिए मुझे क्या करने की ज़रूरत है?

Answer 1

यह करने के लिए एक ही रास्ता AFAIK जैसे किसी आवरण तत्व में ट्रांसक्लुजन साथ निर्देश निर्दिष्ट करने के लिए, .:

<div mlb-select> 
    <select ...></select> 
</div> 

बेशक

वहाँ ऐसा करने का कोई मतलब नहीं है, तो youe मामले बिल्कुल के रूप में ऊपर है है। इस सवाल के संदर्भ में

ट्रांसक्लुजन मोटे तौर पर के रूप में काम करता है:

1. transcluded सामग्री तत्व transclude: true साथ निर्देश है की सामग्री है; आपके मामले में <select> की सामग्री, जो खाली है!
2. स्थानांतरित सामग्री को उस तत्व के अंदर रखा गया है जो निर्देश के टेम्पलेट में ng-transclude निर्दिष्ट करता है।