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

Question

我正在尝试使用 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

Answer 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) {

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

Answer 2

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

    };
}

将代码移至 Timeout 函数。