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

<{1}}函数上的

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

transclude

工作plnkr

检测AngularJS指令中是否使用了可选的已转换元素？

1 个答案: