I'm currently in the process of transitioning our thead generation to a directive. However, I've noticed that when using this directive, the headers lose their styling and become clustered on the left side. Can anyone provide some assistance on what might be causing this issue?
The headers are displaying like this:
Col1Col2Col3Col4Col5
Instead of how they should appear without a directive, properly aligned above their respective data columns:
Col1 Col2 Col3 Col4 Col5
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>