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

Question

我有一个表格，每一行都使用指令和 ng-repeat 显示。

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

请在这里运行 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>小号:

<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 之前就被移出了表格(在 Chrome 和 IE 中——不确定这是否是特定于浏览器的行为)发生了。