AngularJS 中未提供时如何不渲染嵌入槽？

Question

我有一个 AngularJS 组件，它使用带有 2 个嵌入槽的嵌入。其中之一（messageHeading）是可选的，有时根本不会提供。代码如下：

message.js

import template from "./messsage.html";

angular.component('message', {
    transclude: {
        heading: '?messageHeading',
        content: 'messageContent'
    },
    template
});

message.html

<aside class="message">
    <h2 class="message__heading"
        ng-transclude="heading"></h2>
    <p class="message__paragraph"
       ng-transclude="content"></p>
</aside>

问题

如何在没有提供 messageHeading 的情况下完全不渲染 <h2> 元素？ 在当前默认行为中它被渲染，只有空内容，但我希望它永远不会出现在 DOM.

中

在 <h2> 上使用 ngIf 似乎是一种自然的方式，但我不知道如何编写仅在提供包含参数时才为真的条件。

Answer 1

我自己解决了。有$transclude服务，提供方法isSlotFilled(nameOfTheSlot)检查slot是否已满。您可以将其用作 ngIf 条件的值，因此仅当插槽已填充时才呈现 <h2>。

message.js

import template from "./messsage.html";


class MessageController {
    constructor($transclude) {
        this.hasHeading = $transclude.isSlotFilled('heading');
    }
}


angular.component('message', {
    transclude: {
        heading: '?messageHeading',
        content: 'messageContent'
    },
    controller: MessageController,
    template
});

message.html

<aside class="message">
    <h2 class="message__heading"
        ng-if="$ctrl.hasHeading"
        ng-transclude="heading"></h2>
    <p class="message__paragraph"
       ng-transclude="content"></p>
</aside>