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> 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也会移到桌面之外（在Chrome和IE中 - 不确定这是否是特定于浏览器的行为）。

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

1 个答案: