在 Angular 指令中嵌入将元素放入单个“范围”内

这是我的指令：

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

这就是我在 html 中使用它的方式（使用 bootstrap css）

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

然而，生成的代码在 chrome 中看起来像这样：

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

      OS
      Windows 8


      OS Version
      6.2

  </span></table>

正如你所看到的，Angular 只是忽略了我所有的tr/td标签并将内容放入单个 span 元素中。为什么会发生这种情况？

顺便说一句，作为一个实验，我尝试只使用一个嵌入的penvtable 中的标记而不是tr\td标签，在这种情况下，角度只是添加一个ng-scope类到p标签。那么为什么它会搞砸这些 tr/td 标签呢？

事实证明这适用于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