7

这是我的指令：

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 中只使用一个嵌入标签而不是tr\td标签，在这种情况下，角度只是ng-scope向标签添加一个类p。那么为什么它搞砸了这些 tr/td 标签呢？

4

3 回答 3

6

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

于 2013-08-09T23:27:34.413 回答
1

只需提供另一个示例，以防您的表格模板包含其他元素，例如thead

普朗克

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>
于 2014-02-26T16:58:58.583 回答
0

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

如果您删除<table>标签，请将它们替换为带有样式<div>的 's，它应该可以正常工作。display: table

于 2013-08-10T16:12:11.043 回答