CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
pdeva
pdeva

Reputation: 45491

Transclude in Angular directive putting elements inside a single 'span'

Here is my directive:

myapp.directive('envtable',  function () {
return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: '<table class="table" ng-transclude></table>'
};
});

This is how i use it in html (using bootstrap css)

<envtable>
    <tr>
      <td>OS</td>
      <td>{{env.osName}}</td>
    </tr>
    <tr>
      <td>OS Version</td>
      <td>{{env.osVersion}}</td>
    </tr>
  </envtable>

However, the code generated looks like this in chrome:

<table class="table" ng-transclude=""><span class="ng-scope ng-binding">

      OS
      Windows 8


      OS Version
      6.2

  </span></table>

As you can see, Angular just ignored all my tr/td tags and put the contents in a single span element. Why is this happening?

Btw, as an experiment, i tried using just a transcluded p tag in the envtable instead of the tr\td tags and in that case angular just adds a ng-scope class to the p tag. So why does it screw up these tr/td tags?

Upvotes: 7

Views: 3111

Answers (3)

maxisam
maxisam

Reputation: 22715

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


 <table envtable>
    <tbody>
      <tr ng-repeat='r in rows'>
        <td>{{r.col1}}</td>
        <td>{{r.col2}}</td>
        <td>{{r.col3}}</td>
      </tr>
    </tbody>
  </table>

Upvotes: 1

Roy Daniels
Roy Daniels

Reputation: 6309

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.

Upvotes: 0

zs2020
zs2020

Reputation: 54514

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

Upvotes: 6

Related Questions