AngularJS可選ng-transclude

Question

我在AngularJS 1.5中編寫了一個名爲'news'的自定義指令。

它的佈局如下：

<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：

如果元素選擇器的前綴爲?那麼該槽是可選的。 例如，transclude對象{ slotA: '?myCustomElement' }將<my-custom-element>元素映射到slotA插槽，可以通過$transclude函數或ngTransclude指令訪問該插槽。