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

如您所见，我的新闻指令有两个 children，称为标题和内容字段。可以按如下方式使用：

<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 angular 文档中的示例。它位于 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.

AngularJS 可选 ng-transclude

AngularJS optional ng-transclude

angularjs

angularjs-ng-transclude