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服务。因此，您可以使用官方＆＃39;来检查内容的存在。方法：

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

Answer 4

基于@ plong0＆amp; amp;的解决方案@Ilan，这似乎工作得更好，因为它也适用于空格。

$transcludeFn(function(clonedElement) {
    scope.hasTranscludedContent = clonedElement.html().trim() === "";
});

之前<my-directive> </my-directive>将返回.length 1，因为它包含文本节点。由于传递给$transcludeFn的函数返回了被转换内容内容的jQuery对象，我们可以获取内部文本，删除末尾的空白，并检查它是否为空。

请注意，这只会检查文字，因此包含没有文字的html元素也会被标记为空。像这样：<my-directive> <span> </span> </my-directive> - 这虽然符合我的需要。

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

4 个答案: