javascript - thead 中的 ng-repeat 和自定义指令问题

Question

我试图将我们的标题生成移动到一个指令，但是当使用它时，标题会失去样式并最终聚集在左侧。谁能就我做错了什么提供一些指导？

标题如下所示:

Col1Col2Col3Col4Col5

当我使用没有指令的相同 html 时，而不是这样。请注意，它们在其数据列上方正确对齐:

Col1 Col2 Col3 Col4 Col5

index.html

<table class="table table-hover">                        
    <thead>
        <table-headers></table-headers>
    </thead> 
    ...
    ...
</table>

指令.js

app.directive('tableHeaders', function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    priority: 1001,
    templateUrl: '/PATH/TO/PARTIAL/table-headers.html'
  };
});

表头.html

<tr>
    <th ng-cloak="true" ng-repeat="header in coreHeaders" ng-click="setOrderBy(header)"> {{header}} <i class="fa" ng-show="header == ordering.currentHeader" ng-class="ordering.reverse ? 'fa-caret-up' : 'fa-caret-down'"></i></th>
    <th class="align-right" ng-cloak="true" ng-repeat="header in statHeaders" ng-click="setOrderBy(header)">{{header}} <i class="fa" ng-show="header == ordering.currentHeader" ng-class="ordering.reverse ? 'fa-caret-up' : 'fa-caret-down'"></i></th>
</tr>

Answer 1

唯一可以作为 <thead> 的元素的 child 是<tr> . 即使你有一个 Angular 的指令，它用适当的 tr 替换了它的原始标记。元素，浏览器会更快；)并且会在指令编译之前破坏您的 html，因此结果可能会非常意外。

尝试将表头实现为属性(限制:“A”，并删除 replace: true 选项)。这样它从一开始就是一个有效的 DOM 树。