检测是否为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并且无权访问linkcompile函数。 但是你有权使用$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>会返回它的.length1因为它包含一个文本节点。 因为传入$transcludeFn的函数会返回一个jQuery对象的transcluded内容的内容,我们可以得到内部文本,删除末尾的空白,并检查是否是空白的。

请注意,这只会检查文本 ,所以包含没有文本的html元素也会被标记为空。 像这样: <my-directive> <span> </span> </my-directive> – 尽pipe如此,这仍然适用于我的需求。