在Angular指令中转换将元素放入单个"span"中

Question

这是我的指示:

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元素中.为什么会这样？

顺便说一下,作为一个实验,我尝试p在envtable中使用只有一个transcluded tr\td标签而不是标签,在这种情况下,angular只是ng-scope为p标签添加一个类.那么为什么搞砸这些tr/td标签呢？

Answer 1

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