使用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。