Я создаю директиву с Angular 1.6, которая создает фиксированный заголовок для таблицы. Я пытаюсь добиться этого, клонировав заголовок таблицы и исправив это. Все это отлично работает в большинстве моих таблиц. Я использую scope: false, чтобы сохранить родительскую область, поскольку некоторые элементы заголовка ссылаются, например. функции сортировки. Это также работает. Моя проблема связана с одной таблицей, которая создает столбцы на основе массива, потому что я хочу иметь возможность изменять столбцы. Столбцы добавляются с помощью ng-repeat. Когда я клонирую этот заголовок, ng-repeat не клонируется.
Что я могу сделать, чтобы клонировать элемент, содержащий ng-repeat?
HTML таблицы:
<table class="proloen-table no-last-border" table-fix-header>
<thead class="light-blue-background">
<tr>
<th>{{vm.testString}}</th>
<th ng-repeat="head in vm.tableHeaders">
<span>{{ head.label | translate }}</span>
<sorting sortkey="head.sort" color="'white'" filter="vm.state.sorting"></sorting>
</th>
</tr>
</thead>
...
</table>
Контроллер (с controllerAs: 'vm') имеет (среди прочего):
vm.testString = 'Test';
vm.tableHeaders = [{label: 'Column1', sort: 'prop1'}, {label: 'Column2', sort: 'prop2'}];
Директива выглядит следующим образом:
.directive('tableFixHeader', function ($window, $compile) {
return {
restrict: 'A',
scope: false,
link: function (scope, element) {
var clone;
function init() {
element.wrap('<div class="fix-table-container"></div>');
clone = element.clone(true);
clone.find('tbody').remove().end().addClass('table-header-fixed');
clone.removeAttr('table-fix-header');
$compile(clone)(scope);
element.before(clone);
resizeFixed();
}
function resizeFixed() {
clone.find('th').each(function (index) {
$(this).css('width', element.find('th').eq(index).outerWidth() + 'px');
});
}
function scrollFixed() {
var offset = $($window).scrollTop(),
tableOffsetTop = element.offset().top,
tableOffsetBottom = tableOffsetTop + element.height() - element.find('thead').height();
if (offset < tableOffsetTop || offset > tableOffsetBottom){
clone.hide();
}
else if (offset >= tableOffsetTop && offset <= tableOffsetBottom && clone.is(':hidden')) {
clone.show();
}
}
$window.addEventListener('scroll', scrollFixed);
$window.addEventListener('resize', resizeFixed);
scope.$on('$destroy', function() {
$window.removeEventListener('scroll', scrollFixed);
$window.removeEventListener('resize', resizeFixed);
});
init();
}
};
});
Директива отлично работает для фиксированных столбцов таблиц, и приведенный выше пример отлично клонирует первый «жестко закодированный» столбец вместе с переменной из контроллера. Проблема возникает при клонировании файла ng-repeat. Я просто не могу понять, как клонировать ng-repeat, чтобы он работал и обновлялся при обновлении списка столбцов.
