检测是否已为angularjs指令提供了包含内容

小编典典

检测是否已为angularjs指令提供了包含内容

angularjs

我有一条指令（进度条），该指令应该有两种可能的状态，一种没有任何描述，一种在左侧带有标签。简单地使用包含在此标签中的内容将很酷。

有谁知道如何根据是否提供了包含内容的内容将类添加到指令中？

所以我想补充：

<div class="progress" ng-class="{withLabel: *CODE GOES HERE*}">
    <div class="label"><span ng-transclude></span>
    <div class="other">...</div>
</div>

非常感谢！

阅读 226

2020-07-04

共1个答案

小编典典

在发布具有多插槽插入的Angular
v1.5之后，它变得更加简单。例如，您使用component而不是directive并且没有访问link或compile功能。但是您可以使用$transclude服务。因此，您可以使用“官方”方法检查内容的存在：

app.component('myTransclude', {
  transclude: {
    'slot': '?transcludeSlot'
  },
  controller: function ($transclude) {
    this.transcludePresent = function() {
      return $transclude.isSlotFilled('slot');
    };
  }
})

使用这样的模板：

<div class="progress" ng-class="{'with-label': withLabel}">
    <div class="label"><span ng-transclude="slot"></span>
    <div class="other">...</div>
</div>

2020-07-04