2016-03-28 32 views
11

AngularJS 1.5'te 'news' adında özel bir yönerge yazdım.AngularJS isteğe bağlı ng-transclude

aşağıdaki
<div class="row"> 
    <div class="largeText shadow1" ng-transclude="heading"></div> 
    <div class="mediumText shadow2" ng-transclude="content"></div> 
</div> 

Bu yönergenin JavaScript dosyası olarak aşağıdaki gibidir:

Bu düzen olmasıdır

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

Gördüğünüz gibi, benim haber direktifi iki çocuk denilen başlık ve içerik alanları vardır . Aşağıdaki gibi kullanılabilir: Yönerge şu ana kadar iyi çalışır. Yani, başlık ve içerik bölümleri bazı içeriklerle doldurulduğu sürece, yönerge bunları beklendiği gibi gösterir. Ancak, bu transclusion slot'ları zorunlu kılmaya çalışıyorum. Ben yönergesi her kullandığınızda:

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

angularjs ben içerik yuvası dolu değil belirten bir hata atar. Bu yuvaları isteğe bağlı yapmak hiç mümkün mü?

cevap

18

Gerçek belgede nerede olduğunu gerçekten bulamıyorum, ancak gördüğüm bir örneğe göre, bir yuva için isteğe bağlı olarak ? değerini kullanabileceğinizi düşünüyorum.

Örnek:

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

Bu https://docs.angularjs.org/api/ng/directive/ngTransclude#multi-slot-transclusion açısal dokümanlar, örneğin gelir. App.js.

Ayrıca yuva böyle bir şey yaparak, isteğe bağlıdır durumlar için varsayılan ekleyebilirsiniz:

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


Düzenleme: aslında ben belgelerinde buldum. Bu bölümde https://docs.angularjs.org/api/ng/service/$compile#transclusion diyor: eleman seçici bir ? öneki

o zaman o yuva isteğe bağlıdır. Örneğin, { slotA: '?myCustomElement' } transclude nesneleriniöğesininnumaralı öğeye eşlemeleriyle, $transclude işlevinden veya ngTransclude yönergesinden erişebilirsiniz.

+0

Aradığım şey budur, teşekkürler! –