कस्टम एचटीएमएल (एक और निर्देश)

Question

के साथ लपेटें निर्देश मान लें कि मेरे पास <my-directive> नामक निर्देशक निर्देश है। यह कुछ एचटीएमएल प्रतिपादन और घटना हैंडलिंग करता है, यह पूरी तरह से परीक्षण किया जाता है।

अब मैं जो इस html स्निपेट <div class="my-div"> प्रस्तुत करना होगा एक और आवरण के निर्देश <wrapper> साथ इस निर्देश रैप करने के लिए, ताकि मैं इस तरह कोड लिख सकते हैं करना चाहते हैं:

<wrapper> 
    <my-directive></my-directive> 
</wrapper> 

और है:

<div class="my-div"> 
    <my-directive></my-directive> 
</div> 

यह कैसे प्राप्त कर सकता है? मैंने पहले कुछ दृष्टिकोणों की कोशिश की है, उनमें से कोई भी काम नहीं कर रहा था इसलिए मैं कोई कोड पोस्ट नहीं कर रहा हूं।

Answer 1

आप की तरह

app.directive('wrapper', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    template: '<div class="my-div" ng-transclude></div>' 
    }; 
}); 

डेमो आवरण निर्देश बना सकते हैं: Plunker

Answer 2

ऐसा लगता है कि आप बाहरी टेम्पलेट में ng-transclude याद कर रहे हैं और transclude बाहरी निर्देश में सच की स्थापना। ng-transclude विशेषता संकलक जब transcludetrue

app.directive('wrapper',function(){ 
return { 
    restrict:'E', 
    template: '<div>Outer wrapper text<div ng-transclude></div></div>', 
    transclude: true, 
    replace:true 
} 
}); 

डेमो http://plnkr.co/edit/sfbRyPZjqsTG6cuiaXZV?p=preview