AngularJS составной заголовок таблицы

Я разрабатываю приложение расписания. У меня есть готовый макет (html/css). В настоящее время я работаю над макетированием. Моя текущая цель заключается в извлечении заголовка таблицы расписания в директиве. Угловой шаблон HTML должен выглядеть примерно так:AngularJS составной заголовок таблицы

<colgroup class="col_day"> 
    <col ng-repeat="day in header.days" ng-class="someConditions"> 
</colgroup> 
<thead> 
    <tr> 
     <th ng-repeat="day in header.days" ng-class="someConditions"> 
      {{someLayout}} 
     </th> 
    </tr> 
</thead>

Я хочу использовать этот шаблон с помощью директивы, как это:

<table> 
    <timesheet-header></timesheet-header> 
    <tbody></tbody> 
    <tfoot></tfoot> 
</table>

Проблемы:

Угловая не позволяет использовать несколько корни в шаблоне в директивах с заменить: true
Шаблон содержимого оказывается вне тега (только если шаблон содержит один тег она отображается внутри таблицы

У меня есть только плохие решения:

Создание двух различных директив для COLGROUP и THEAD (это решает кратные корни , но HTML будет отображаться за пределы таблицы тегов)
шаблона Keep обязательных результатами невидимой и добавьте в начале копии генерируемого HTML в таблицу (по JQuery)
использовать директиву как атрибут для таблицы тега ... Я пытался, но это удаляет все другое содержимое таблицы (я пробовал transclude) ...

Примечание: Я использую AngularJS v1.4.3. Отладка в новейшем Google Chrome.

источник

2015-08-19 Pavel Shkleinik

Вы уверены, что при создании двух различных директив в HTML-содержимое эти директивы появляются вне тега 'table'? – callmekatootie

Да, я много раз пробовал. Я даже пытался упростить свой шаблон до чистого одноточечного html. Только тег появляется внутри

. Все остальные теги (только или один ) появляются за пределами

(до). –

Я чувствую, что директива атрибута с transclude - правильный ответ здесь. Можете ли вы дать мне немного больше информации о том, что происходит, когда вы это пробовали? – SamHuckaby

ответ

Хорошо, поэтому директива атрибута была на самом деле правильным способом, она просто немного поработала, чтобы понять, как изменения, связанные с переходом на работу в более новые версии Angular.

Итак, с более новыми версиями Angular, ng-transclude фактически удаляет все внутри директивы. Оказывается, однако, что когда вы используете опцию transclude в своей директиве, Angular фактически предоставляет вам функцию в функции ссылок, которая позволяет вручную обрабатывать транслируемый контент. Как только вы это сделаете, вы можете сказать, что просто добавьте контент, а не заменяете его, как это делается по умолчанию.

Некоторые хорошее чтение по этому вопросу можно найти здесь: http://ng.malsup.com/#!/transclude-function

шаблона:

<table> 
    <colgroup class="col_day"> 
     <col ng-repeat="day in header.days" ng-class="someConditions"> 
    </colgroup> 
    <thead> 
     <tr> 
      <th ng-repeat="day in header.days" ng-class="someConditions"> 
       {{someLayout}} 
      </th> 
     </tr> 
    </thead> 
</table>

директива:

app.directive('timesheetHeader', function() { 
    return { 
    restrict: 'A', 
    replace: true, 
    transclude: true, 
    templateUrl: 'timesheet-header.template.html', 
    link: function(scope, el, attrs, ctrl, transcludeFn) { 
     var transcludedContent = transcludeFn(); 
     el.append(transcludedContent); 
    } 
    }; 
});

Фактический HTML код:

<table timesheet-header> 
    <tbody> 
     <tr> 
      <td>Hello</td> 
      <td>world!</td> 
     </tr> 
    </tbody> 
    <tfoot></tfoot> 
</table>

источник

2015-08-19 16:19:47 SamHuckaby

Благодарим вас за отличный ответ! Сейчас это работает отлично. Я собираюсь добавить некоторые угловые директивы внутри trunscluded content, надеюсь, что это сработает =) –

Awesome! Я рад, что смогу помочь. – SamHuckaby

«Создайте две разные директивы для colgroup и thead (это решает несколько корней, но html все равно будет отображаться вне табличного тега)». Более подробную информацию по этому поведению можно найти в https://github.com/angular/angular.js/issues/1459.И именно в https://github.com/angular/angular.js/issues/1459#issuecomment-67235182

Вы можете решить эту проблему с помощью transclude и нестандартную директиву для таблицы в качестве атрибута

http://plnkr.co/edit/8JptrwUcA0pPl9xB9yZQ?p=preview

<table my-table> 
    <tbody> 
    <tr> 
     <td>4</td> 
     <td>5</td> 
    </tr> 
    </tbody> 
</table> 

.directive('myTable', [function() { 
    return { 
    restrict: 'A', 
    transclude: true, 
    template: '<table>' + 
       '<colgroup class="col_day"><col ng-repeat="n in [1, 2] track by $index">{{n}}</col></colgroup>' + 
       '<thead>' + 
        '<tr>' + 
        '<th ng-repeat="n in [1, 2] track by $index"> {{n}}</th>' + 
        '</tr>' + 
       '</thead>' + 
       '<div ng-transclude></div>' + 
      '</table>' 
     }; 
    }])

источник

2015-08-19 17:49:43 Bharat

Смежные вопросы