Я пытаюсь перевести наше поколение в директиву, но при использовании этого заголовки теряют свой стиль и заканчивают группировку слева. Может ли кто-нибудь предложить какие-то указания относительно того, что я делаю неправильно?
Заголовки выглядят так:
Col1Col2Col3Col4Col5
Вместо этого, когда я использую один и тот же html без директивы. Обратите внимание, что они правильно выровнены над столбцами данных:
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'
};
});
Стол-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>
Единственный элемент, который вы можете иметь в качестве дочернего элемента <thead>
- <tr>
. Даже если у вас есть директива Angular, которая заменяет ее оригинальной разметкой правильными элементами tr
, браузер будет быстрее;) и будет калечить ваш html перед компиляцией директивы, чтобы результаты могли быть довольно неожиданными.
Попробуйте внедрить заголовки таблиц в качестве атрибута (ограничивайте: "A" и удалите опцию replace: true
). Таким образом, это будет действительное дерево DOM с самого начала.