How to transclude div's content as a table header? - angularjs

Question

I have made a custom directive for a table in Angular JS which represents like this
`<div mytable api="data">
<div col="A"></div>
<div col="B"></div>
</levelOne>`
myTable directive has a templateUrl associated with it which has table and paging options. right now i have hard code the column names. But i want my column names col=A and col=B inside the parent directive mytable. Problem is that mytable is replaced by the templateUrl and i cannot get the inside elements.

Answer 1

I did not understand what are you trying to achieve with that but would like to provide a solution which you can build up on.
Declare your directives (note the hyphenated element names):
<div mytable api="data">
<div col="ID"></div>
<div col="NAME"></div>
</div>
Now define the directive mytable as:
var myApp = angular.module('myApp',[]);
myApp.run(function($rootScope) {
$rootScope.data = [{
id: 1,
name: 'One'
}, {
id: 2,
name: 'Two'
}];
});
myApp.directive('mytable', function() {
return {
restrict: 'AE',
transclude: true,
template:
'<table>\
<thead></thead>\
<tbody>\
<tr ng-repeat="d in data">\
<td ng-bind="d.id"></td>\
<td ng-bind="d.name"></td>\
</tr>\
</tbody>\
</table>',
controller: function($scope, $element, $attrs) {
$scope.data = $scope.$eval($attrs.api);
},
link: function(scope, element, attrs, NullController, $transcludeFn) {
$transcludeFn(function(tElement) {
var headHTML = '<tr>';
for (var i = 0; i < tElement.length; i++) {
if (tElement[i].nodeType === 1) {
headHTML+= '<td>' + angular.element(tElement[i]).attr('col') + '</td>';
}
}
headHTML+= '</tr>';
element.find('thead').html(headHTML);
});
}
};
});
New Demo: http://jsfiddle.net/codef0rmer/aa18tuzf/
Old Demo: http://jsfiddle.net/codef0rmer/yy4rc49L/