javascript - AngularJS complex table header -

i'm developing timesheet application. have ready layout (html/css). i'm working on layout behavior. current goal extracting timesheet table header in directive. angular template html should similar this:

<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> 

i want use template via directive this:

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

problems:

• angular doesn't allow use multiple roots in template in directives replace: true
• template content appears outside of tag (only if template contains single tag rendered inside table

i have bad solutions:

• create 2 different directives colgroup , thead (this solves multiple roots, html still appear outside table tag)
• keep template binding results invisible , prepend copy of generated html table (by jquery)
• use directive attribute table tag... tried removes other table content (i tried transclude)...

note: i'm using angularjs v1.4.3. debugging in latest google chrome.

okay, attribute directive in fact right way go, took little bit realize how changes transclude work in newer versions of angular.

so, newer versions of angular, ng-transclude removes inside of directive. turns out though when use transclude option on directive, angular exposes function in link function allows manually handle transcluded content. once have this, can tell append content instead of replace default.

some reading on subject can found here: http://ng.malsup.com/#!/transclude-function

template:

<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> 

directive:

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 );     }   }; }); 

actual html code:

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