कोणीयजेएस वैकल्पिक एनजी-ट्रांसफर

Question

मैंने अंगुलरजेएस 1.5 में 'समाचार' नामक एक कस्टम निर्देश लिखा है।

इस प्रकार

<div class="row"> 
    <div class="largeText shadow1" ng-transclude="heading"></div> 
    <div class="mediumText shadow2" ng-transclude="content"></div> 
</div> 

इस निर्देश के JavaScript फ़ाइल के रूप में:

यह लेआउट है इस प्रकार है

return {   
    restrict: 'E', 
    transclude: { 
     'heading': 'heading', 
     'content': 'content' 
    }, 
    scope: { 
     //Some parameters here 
    }, 
    templateUrl: '/directives/news.html' 
}; 

जैसा कि आप देख, मेरी खबर निर्देश दो बच्चे हैं, कहा जाता है शीर्षक और सामग्री क्षेत्रों है । इसका उपयोग निम्नानुसार किया जा सकता है:

<news> 
    <heading> 
     //Any content goes here 
    </heading> 
    <content> 
     //Any content goes here 
    </content> 
</news> 

अभी तक, निर्देश ठीक काम करता है। मेरा मतलब है, जब तक शीर्षक और सामग्री अनुभाग कुछ सामग्री से भरे जाते हैं, निर्देश उन्हें अपेक्षित दिखाता है। हालांकि, मैं इन स्थानांतरण स्लॉट को अनिवार्य नहीं बनाने की कोशिश कर रहा हूं। जब भी मैं के रूप में निर्देश का उपयोग करें:

<news> 
    <heading></heading> 
</news> 

AngularJS कह रही है कि मैं सामग्री स्लॉट नहीं भरे हैं एक त्रुटि फेंकता है। क्या इन स्लॉट को वैकल्पिक बनाना संभव है?

Answer 1

मैं सच में लगता है नहीं कि वह कहाँ वास्तविक प्रलेखन में है, लेकिन एक उदाहरण मैंने देखा पर आधारित है, मुझे विश्वास है कि आप मूल्य से पहले एक ? उपयोग कर सकते हैं स्लॉट वैकल्पिक बनाने के लिए।

उदाहरण:

transclude: { 
    'heading': 'heading', 
    'content': '?content' 
} 

यह https://docs.angularjs.org/api/ng/directive/ngTransclude#multi-slot-transclusion पर कोणीय डॉक्स में उदाहरण से आता है। यह app.js. में है

तुम भी ऐसे मामलों में जहां स्लॉट, वैकल्पिक है कुछ इस तरह करने से इसके लिए एक सामान्य जोड़ सकते हैं:

<div class="largeText shadow1" ng-transclude="heading">Default stuff for the slot goes here</div> 

संपादित: वास्तव में मैं इसे दस्तावेज़ों में भी पाए। यह इस खंड https://docs.angularjs.org/api/ng/service/$compile#transclusion में कहते हैं: तत्व चयनकर्ता एक ? लगी होती है

है तो उस स्लॉट वैकल्पिक है। उदाहरण के लिए, मानचित्र <my-custom-element>slotA स्लॉट पर तत्वों को स्थानांतरित करें, जिसे $transclude फ़ंक्शन के माध्यम से या ngTransclude निर्देश के माध्यम से पहुंचा जा सकता है।