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标记，在这种情况下，angular只会向ng-scope类添加一个p类{1}}标记。那么为什么搞砸了这些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样式，它应该可以正常使用。

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

3 个答案: