Table 行作为指令显示在 angularjs 的 table 上下文之外

Question

我有一个 table 并且每一行都使用指令和 ng-repeat 来显示。

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

请在此处运行fiddle：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> accepts only <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）

编辑：

为了验证上述假设，我reproduced行为如下：

<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 发生之前就被移到了 table 之外（在 Chrome 和 IE 中——不确定这是否是特定于浏览器的行为）。

Table 行作为指令显示在 angularjs 的 table 上下文之外

Table row as directive displays out of table context in angularjs

angularjs

angularjs-directive