[英]Detecting if optional transcluded elements are used in an AngularJS directive?
I have a directive set up in the style shown below; 我有一个以下面显示的样式设置的指令; it allows for optional transcluded elements like the
<dir-header>
and <dir-footer>
used in the example. 它允许使用可选的transcluded元素,例如示例中使用的
<dir-header>
和<dir-footer>
。
directive.js (partial) 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 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>
Usage 用法
<dir>
<dir-header>My Header</dir-header>
<dir-footer>My Footer</dir-footer>
</dir>
Based on what I have here is there a way to detect if <dir-header>
is being used? 基于我在这里有一种方法来检测是否正在使用
<dir-header>
? Can I access the content passed into it—in this case the string "My header"
—from the link function? 我可以访问传递给它的内容 - 在这种情况下是字符串
"My header"
- 来自链接功能吗?
Some background on what I've done so far: 关于我到目前为止所做的一些背景:
I've seen a few discussions on this topic using the transclude: true
style rather than transclude: {}
. 我已经使用
transclude: true
看到了一些关于这个主题的讨论transclude: true
样式而不是transclude: {}
。 Based on suggestions found from that research I tried the following: 根据该研究发现的建议,我尝试了以下方法:
link: function (scope, elem, attrs, $transclude) {
$transclude(function (clone) {
console.log(clone);
});
}
I couldn't quite discern how clone works but it seems to be a NodeList representing what has been transcluded. 我无法辨别克隆是如何工作的,但它似乎是一个表示已被转换的NodeList。 Unfortunately the only piece of useful information I get from this is a length;
不幸的是,我从中获得的唯一有用信息是长度;
clone.length
for my usage example above would be 3 (one for dir
, header
, and footer
). 我上面的用法示例的
clone.length
将是3(一个用于dir
, header
和footer
)。 If I remove footer
the length would be 2, and so on. 如果我删除
footer
,长度将为2,依此类推。 There doesn't seem to be any data to differentiate the elements in the NodeList, though, so I can't tell which transcluded elements are being used, just how many. 但是,似乎没有任何数据来区分NodeList中的元素,因此我无法分辨使用哪些被转换的元素,只有多少。
Ultimately I would like to set some style conditions based on whether a particular transcluded element is being used or not. 最后,我想根据是否使用特定的被转换元素来设置一些样式条件。
isSlotFilled
function on the transclude
function will give you the desired result. 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'))
}
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.