Transclude 在 Angular 指令中将元素放在单个“跨度”中

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

顺便说一句，作为一个实验，我尝试在 envtable 中只使用一个嵌入的 p 标签而不是 tr\td 标签，在这种情况下，角度只是将一个 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

Answer 2

只需提供另一个示例，以防您的表格模板包含其他元素，例如 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>

Answer 3

我认为这可能会重复，但您的解决方案很简单。避免使用<table>！

如果您删除 <table> 标记，请将它们替换为 <div> 和 display: table 样式，它应该可以正常工作。