检测是否已为angularjs指令指定了转录内容

Question

我有一个指令(进度条),它应该有两种可能的状态,一种没有任何描述,一种在左侧有一个标签.简单地使用此标签的已转换内容会很酷.

有没有人知道我如何根据是否给出了一个转录内容来为我的指令添加一个类？

所以我想补充一下:

<div class="progress" ng-class="{withLabel: *CODE GOES HERE*}">
    <div class="label"><span ng-transclude></span>
    <div class="other">...</div>
</div>

非常感谢!

Answer 1

在使用多插槽转换发布Angular v1.5后,它甚至更简单.例如,您已使用component而不是或directive没有访问权限link或compile功能.但您可以获得$transclude服务.因此,您可以使用"官方"方法检查内容的存在:

app.component('myTransclude', {
  transclude: {
    'slot': '?transcludeSlot'
  },
  controller: function ($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>

Answer 2

基于@ Ilan的解决方案,您可以使用这个简单的$ transclude函数来了解是否存在被转换的内容.

$transclude(function(clone){
    if(clone.length){
        scope.hasTranscluded = true;
    }
});

Plnkr使用ng-if演示这种方法,如果没有任何内容可以设置默认内容:http://plnkr.co/hHr0aoSktqZYKoiFMzE6

Answer 3

这是一个吸烟者:http://plnkr.co/edit/ednJwiceWD5vS0orewKW?p=preview

你可以在链接函数中找到transcluded元素并检查它的内容:

指示:

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>

您也可以像这样创建自定义转换指令:

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);
      })
    }
  }
})