angularjs – 使用ng-transclude在表中似乎不能正常工作

我创建了一个简单的指令,用于在< 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>

问题是,被转录的文本被插入到DOM中,只是一个textNode,并且出现在< table>而不是内部.任何想法为什么会发生这种情况？

<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',function () {
  return {
    restrict: 'A',template: '<td class="left" colspan="{{ colSpan }}"><div ng-transclude></div></td>',attrs) {
        var span = angular.element(elem).parents('tbody').siblings('thead').find('tr').children().length;
        scope.colSpan = span;
    }
  };
}])