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

Question

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

headers是这样的：

Col1Col2Col3Col4Col5

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

第 1 列第 2 列第 3 列第 4 列第 5 列

index.html

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

directives.js

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

table-headers.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 所以结果可能非常出乎意料。

尝试将 table-headers 作为属性实施（限制：'A'，并删除 replace: true 选项）。这样一开始它就是一棵有效的 DOM 树。

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

ng-repeat and custom directive issue in thead

javascript

angularjs

angularjs-directive

ng-repeat