我无法在表格的 tbody 内选择带有 ng-repeat 的 tr？答案

【问题标题】：I couldn't select tr's with ng-repeat inside tbody of the table?我无法在表格的 tbody 内选择带有 ng-repeat 的 tr？
【发布时间】：2013-08-09 07:12:04
【问题描述】：

我正在尝试使用 angularjs 为 table 编写指令，但选择 table > tr 只会导致表格的第一行。 tbody 内部的 tr 不包含在结果中。当我从此语句中删除 ng-repeat="header in headers" 时

<table>
    <thead>
        <tr>
            <th ng-repeat="header in headers">{{header}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="header in headers">   // I removed ng-repeat to select all rows
            <td ng-repeat="header in headers">{{header}}</td>
        </tr>
    </tbody>
</table>

表格的所有行都选择成功。我可以看到四个带有console.log的tr对象。如何在指令链接函数中选择表内的所有行？谢谢你的时间。

这是我的 plnk： http://plnkr.co/edit/fvvC85

【问题讨论】：

标签： jquery angularjs ng-repeat

【解决方案1】：

似乎该指令在 ng-repeat 完成之前加载。我将您的代码移到 $timeout 中，我发现它可以正常工作。

$timeout(function(){
    console.log(element.find('tr'));
    console.log(element.find('tr').length);
},1000);

您需要注入 $timeout 才能完成这项工作：

directives.directive('zenTable', function($compile,$timeout) {

但不确定这是否是一种理想的方法。

【讨论】：

【解决方案2】：

compile : function($element, $attrs){
    return function(scope,element,attrs){
        setTimeout(function() {
             console.log(element.find('tbody').children());
        },100);

    };
}

将代码移至 Timeout 函数。

【讨论】：