AngularJS opzionale ng-transclude

Question

Ho scritto una direttiva personalizzata chiamata 'notizie' in AngularJS 1.5.

E 'disposizione è la seguente:

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

Il file JavaScript di questa direttiva è la seguente:

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

Come si vede, la mia direttiva notizia ha due figli, chiamati intestazione e campi di contenuti . Può essere utilizzato come segue:

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

Finora, la direttiva funziona correttamente. Voglio dire, finché le sezioni di titolo e contenuto sono piene di contenuto, la direttiva le mostra come previsto. Tuttavia, sto cercando di rendere questi slot di esclusione non obbligatori. Ogni volta che uso la direttiva come:

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

AngularJS genera un errore dicendo che non ho riempito lo slot del contenuto. È mai possibile rendere questi slot opzionali?

Answer 1

Non riesco a trovare la documentazione effettiva, ma sulla base di un esempio che ho visto, credo che sia possibile utilizzare uno ? prima del valore per rendere lo slot opzionale.

Esempio:

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

Questo deriva dal esempio nei documenti angolari a https://docs.angularjs.org/api/ng/directive/ngTransclude#multi-slot-transclusion. È nell'app.js.

È inoltre possibile aggiungere un default per i casi in cui lo slot è opzionale, facendo qualcosa di simile a questo:

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

Edit: in realtà ho trovato nella documentazione. Si dice in questa sezione https://docs.angularjs.org/api/ng/service/$compile#transclusion:

Se il selettore elemento è preceduto da un ? allora quello slot è opzionale. Ad esempio, l'oggetto di trasporto { slotA: '?myCustomElement' } mappe <my-custom-element> elementi nello slot slotA, a cui è possibile accedere tramite la funzione $transclude o tramite la direttiva ngTransclude.