检测是否为angularjs指令提供了transclude内容
我有一个指令（进度条），应该有两个可能的状态，一个没有任何描述，一个在左边有一个标签。 简单地使用这个标签的transcluded内容会很酷。
有没有人知道我可以添加一个类到我的指令取决于是否已经给予transclude内容？
所以我想补充一下：
<div class="progress" ng-class="{withLabel: *CODE GOES HERE*}"> <div class="label"><span ng-transclude></span> <div class="other">...</div> </div> 非常感谢！
Angular v1.5发布多时隙跨越后，更简单。 例如，您使用了component而不是directive并且无权访问link或compile函数。 但是你有权使用$transclude服务。 所以你可以用“官方”方法检查内容的存在：
app.component('myTransclude', { transclude: { 'slot': '?transcludeSlot' }, controller: ($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>
基于@ Ilan的解决scheme，你可以使用这个简单的$ transclude函数来知道是否有transcluded内容。
$transclude(function(clone){ if(clone.length){ scope.hasTranscluded = true; } });
Plnkr演示这种方法与ng – 如果设置默认内容，如果没有东西transclude： http : //plnkr.co/hHr0aoSktqZYKoiFMzE6
这里是一个plunker： http ://plnkr.co/edit/ednJwiceWD5vS0orewKW?p=preview
你可以在链接函数里面findtranscluded元素并检查它的内容：
指示：
app.directive('progressbar', function(){ return { scope: {}, transclude: true, templateUrl: "progressbar.html", link: function(scope,elm){ var transcluded = elm.find('span').contents(); scope.withLabel = transcluded.length > 0; // true or false } } })
模板：
<div class="progress" ng-class="{'with-label': withLabel}"> <div class="label"><span ng-transclude></span> <div class="other">...</div> </div>
你也可以像这样创build自定义的转换指令：
app.directive('myTransclude', function(){ return { link: function(scope, elm, attrs, ctrl, $transclude){ $transclude(function(clone){ // Do something with this: // if(clone.length > 0) ... elm.empty(); elm.append(clone); }) } } })
基于@ plong0＆@Ilan的解决scheme，这似乎更好一些，因为它也适用于空白。
$transcludeFn(function(clonedElement) { scope.hasTranscludedContent = clonedElement.html().trim() === ""; });
之前的<my-directive> </my-directive>会返回它的.length为1因为它包含一个文本节点。 因为传入$transcludeFn的函数会返回一个jQuery对象的transcluded内容的内容，我们可以得到内部文本，删除末尾的空白，并检查是否是空白的。
请注意，这只会检查文本 ，所以包含没有文本的html元素也会被标记为空。 像这样： <my-directive> <span> </span> </my-directive> – 尽pipe如此，这仍然适用于我的需求。
