Question

我写了一个名为＆＃39; news＆＃39;的自定义指令。在AngularJS 1.5中。

它的布局如下：

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

如果元素选择器以?为前缀，那么该插槽是可选的。例如，转换对象{ slotA: '?myCustomElement' }将<my-custom-element>个元素映射到slotA个插槽，可以通过$transclude函数或ngTransclude指令进行访问。 / p>

AngularJS可选ng-transclude

1 个答案: