Learn the directive below that generates a table with four columns:
app.directive('tableWrapper',function() {
return {
restrict: 'E',
transclude: true,
template: '<table><ng-transclude></ng-transclude></table>',
}
});
app.directive('myCells',function() {
return {
restrict: 'E',
template: '<tr><td>Name</td><td ng-repeat="c in [1,2,3]">{{c}}</td></tr>',
}
});
View the html code on Plunker: http://plnkr.co/edit/ZTrSifnYWKaNy9XQzfGL
<table><tr><td>Name</td><td ng-repeat="c in [1,2,3]">{{c}}</td></tr></table>
<hr/>
<table-wrapper><my-cells></my-cells></table-wrapper>
Both tables are identical visually, but the second one, due to transclusion, has separate cells.
Instead of: |Name|1|2|3|
The second one displays: |Name||1||2||3|
Where || represents a thick border between adjacent cells.
Why does this happen?
Is there a solution?