AngularJS 可选 ng-transinclude

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'
}

这来自 Angular 文档中的示例 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 :

If the element selector is prefixed with a ? then that slot is optional. For example, the transclude object { slotA: '?myCustomElement' } maps <my-custom-element> elements to the slotA slot, which can be accessed via the $transclude function or via the ngTransclude directive.