使用ng-transclude在表格中似乎效果不好

Question

我创建了一个简单的指令，用于在没有表格数据（即“找不到结果”）占用整个页面时在<td>中显示一些文本桌子的一排。在我刚刚在<td>中使用静态文本之前，现在我想能够将任何DOM放入其中。我尝试将ng-transclude添加到我的指令中，但现在它以一种奇怪的方式呈现元素。

这里是我的指令：

app.directive('skNoResult', ['$rootScope', function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     transclude: true, 
     template: '<tr ng-if="!hasResult"><td class="left" colspan="{{ colSpan }}"><ng-transclude></ng-transclude></td></tr>', 
     link: function (scope, elem, attrs, ctrl) { 
      var span = angular.element(elem).parents('tbody').siblings('thead').find('tr').children().length; 

      scope.colSpan = span; 

      scope.$watch(attrs.skNoResult, function (list) { 
       if (list.length) { 
        scope.hasResult = true; 
       } else { 
        scope.hasResult = false; 
       } 
      }); 
     } 
    }; 
}]); 

它基本上只是跟踪数据集（阵列），并检查长度，看看是否有任何数据或没有。如果有的话，我们用ngIf显示这一行。

我的HTML看起来就像这样

<tr sk-no-result="model.dataSet">Here is my text I want to transclude into my directive</tr> 

的问题是，transcluded文本被插入到DOM只是一个textNode，并出现在<table>上面，而不是在它的内部。任何想法为什么发生这种情况？

Answer 1

我相信你看到这个的原因并不是因为Angular，而是浏览器看到它在<tr>内部是无效的HTML，因为它期待<td>，因此它将此内容移动到表格之上BEFORE Angular甚至有机会运行并进行跨越。你可以通过删除任何Angular代码来轻松测试，只留下HTML，你会注意到结果是完全一样的。

这里，你可能能够使用一种变通方法：

<tr ng-if="!model.dataSet.length"> 
    <td sk-no-result="model.dataSet">Here is my text I want to transclude into my directive</td> 
</tr> 

而且指令：

app.directive('skNoResult', ['$rootScope', function() { 
    return { 
    restrict: 'A', 
    replace: true, 
    transclude: true, 
    template: '<td class="left" colspan="{{ colSpan }}"><div ng-transclude></div></td>', 
    link: function (scope, elem, attrs) { 
     var span = angular.element(elem).parents('tbody').siblings('thead').find('tr').children().length; 
     scope.colSpan = span; 
    } 
    }; 
}]) 

注意ngTransclude的元素用法，即<ng-transclude></ng-transclude>只能从角版本1.3.0-beta.16及以上版本。如果您使用的是1.2版本，则需要使用上述示例中的属性使用<div ng-transclude></div>

这是一个工作demo。