angularjs - 检测 AngularJS 指令中是否使用了可选的嵌入元素？

Question

我有一个如下所示样式的指令；它允许可选的嵌入元素，例如 <dir-header>和<dir-footer>在示例中使用。

directive.js(部分)

module.directive('dir', function () {
    return {
        restrict: 'E',
        templateUrl: 'path/template.html',
        transclude: {
            'header': '?dirHeader',
            'footer': '?dirFooter'
        },
        link: function (scope, elem, attrs) {
            // do something
        }
    };
});

template.html

<div ng-transclude="header">
  <!-- Transcluded header will appear here -->
</div>

<div class="static-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<div ng-transclude="footer">
    <!-- Transcluded footer will appear here -->
</div>

使用

<dir>
    <dir-header>My Header</dir-header>
    <dir-footer>My Footer</dir-footer>
</dir>

根据我这里的内容，有一种方法可以检测 <dir-header> 是否存在正在被使用？我可以访问传递给它的内容吗？在本例中为字符串 "My header" ——来自链接功能？

<小时/>

到目前为止我所做的一些背景:

我使用transclude: true看到了一些关于此主题的讨论。风格而不是 transclude: {} 。根据该研究中发现的建议，我尝试了以下方法:

link: function (scope, elem, attrs, $transclude) {
    $transclude(function (clone) {
        console.log(clone);
    });
}

我不太清楚克隆是如何工作的，但它似乎是一个代表已被嵌入的内容的 NodeList。不幸的是，我从中得到的唯一有用的信息是长度； clone.length对于我上面的用法示例，为 3(其中一个表示 dir 、 header 和 footer )。如果我删除 footer长度为 2，依此类推。不过，似乎没有任何数据可以区分 NodeList 中的元素，因此我无法判断正在使用哪些嵌入元素，以及使用了多少个元素。

最终我想根据是否使用特定的嵌入元素来设置一些样式条件。

Answer 1

isSlotFilled transclude 上的函数函数将为您提供所需的结果。

angular.module('App', [])
  .directive('dir', function () { 
    return {
        restrict: 'E',
        template: `
          <div ng-transclude="header"></div>
          <div class="static-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>

          <div ng-transclude="footer">
        `,
        transclude: {
            'header': '?dirHeader',
            'footer': '?dirFooter'
        },
        link: function ($s, $el, $attrs, thisCtrl, $transclude) {
          console.log($transclude.isSlotFilled('header'))
          console.log($transclude.isSlotFilled('footer'))
        }
    };
  });

正在工作plnkr