表格行作为指令显示在angularjs的表格上下文之外

Question

我有一张桌子，每一行都要使用指令和ng-repeat显示。

不幸的是，这些行是在表上下文之外呈现的。

请在这里运行小提琴：http : //jsfiddle.net/nu1tu9qL/4/

指令：

.directive('myrow', [function () {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                rowdata: "="
            },
            template: '<tr><td>{{rowdata.a}}</td><td>{{rowdata.b}}</td></tr>',
        };
    }]);

HTML：

<table>
    <thead>
        <th>A</th>
        <th>B</th>
    </thead>
    <tbody>
        <myrow ng-repeat="d in data" rowdata="d"></row>
    </tbody>
</table>

Answer 1

无需深入研究Angular的源代码来诊断此问题，我想这可能是您在中使用了意外元素这一事实的产物<tbody>。<tbody> 仅接受<tr>（出于此问题的目的）。

因此，将您的myrow指令更改为属性，并使模板仅添加<td>s：

<tbody>
  <tr myrow rowdata="d" ng-repeat="d in data"></tr>
</tbody>

和指令：

.directive("myrow", function(){
  return {
    scope: {
      rowdata: "=?"
    },
    template: "<td>{{rowdata.a}}</td><td>{{rowdata.b}}</td>"
  };
});

（您甚至可以将它myrow用作范围，而不是rowdata）

编辑：

为了验证上述假设，我将行为复制如下：

<table>
  <tr><th>Column 1</th></tr>
  <tbody>
    <myrow></myrow>
  </tbody>
</table>

并使用jQuery（类似于Angular要做的事情）：

$(function(){
    $("myrow").replaceWith("<tr><td>A</td></tr>");
});

结果是插入的行出现在上方<table>，就像原始问题一样。实际上，<myrow>即使在replaceWith发生这种情况之前，也会将其移出表（在Chrome和IE中-不确定这是否是特定于浏览器的行为）。