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

here directive:

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

this how use 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, code generated looks in chrome:

<table class="table" ng-transclude=""><span class="ng-scope ng-binding">        os       windows 8         os version       6.2    </span></table> 

as can see, angular ignored tr/td tags , put contents in single span element. why happening?

btw, experiment, tried using transcluded p tag in envtable instead of tr\td tags , in case angular adds ng-scope class p tag. why screw these tr/td tags?

it turns out works 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