Here is my directive: myapp.directive('envtable', function () { return { restrict: 'E', replace: true, transclude: true, template: '
Solution 1:
It turns out this works with restrict: 'A'
<table envtable>
<tr>
<td>OS</td>
<td>{{env.osName}}</td>
</tr>
<tr>
<td>OS Version</td>
<td>{{env.osVersion}}</td>
</tr>
</table>
Demo
Solution 2:
Just provide another example in case your table template has other elements like thead
Plunker
app.directive('envtable', function() {
return {
replace: true,
transclude: true,
template: '<table class="NewTable"><thead><th>Col1</th><th>Col2</th><th>Col3</th></thead></table>',
link: function(scope, elem, attrs, controller, transcludeFn) {
var item = transcludeFn(scope, function(clone) {
return clone.children();
});
elem.append(item);
}
};
});
<tableenvtable><tbody><trng-repeat='r in rows'><td>{{r.col1}}</td><td>{{r.col2}}</td><td>{{r.col3}}</td></tr></tbody></table>
Solution 3:
I think this may be a repeat but your solution is simple. Avoid using <table>!
If you remove the <table> tags, replace them with <div>'s with display: table styling it should work just fine.
Post a Comment for "Transclude In Angular Directive Putting Elements Inside A Single 'span'"