AngularJS $timeout 有时有效有时无效

Question

我在 AngularJS 和 $timeout 方面遇到了一些问题。
页面加载后，我需要运行一些代码。 Http.get() 加载项目，ng-repeat 将它们显示在表格中。然后我需要运行代码以在单击行时突出显示该行。

我找到了使用 $timeout 的解决方案。

$timeout(function () {
    console.log('in timeout');
    $scope.highlightRows();
});

这确实有效，但并非每次都有效。在函数中，我记录表中的行数，有时得到 0，因此单击处理程序未注册，并且突出显示不起作用。

$scope.highlightRows = function () {
    console.log($("#tripsTable").children("tbody").children("tr").length);
    $("#tripsTable").children("tbody").children("tr").children().click(function () {
        console.log('row click');
        $("#tripsTable").children("tbody").children("tr").removeClass("focusedRow");
        $(this.parentNode).addClass("focusedRow");
    });
};

当尝试模拟时，我必须按 Ctrl + F5 刷新。

控制台日志:

in timeout tripsController.js:14
0 

我找不到这个问题的任何解决方案，任何建议将不胜感激:)
谢谢
标记

编辑:这是我的 HTML

<table class="table table-bordered" id="tripsTable">@*table-hover*@
    <thead>
        ....
    </thead>
    <tbody>
        <tr ng-repeat="trip in tripsVM.tripsList | orderBy: 'startDate'" ng-class="(trip.tripID == 0) ? 'newRow' : ''" class="row">
            ....

Answer 1

这看起来像是一个时间问题。由于您没有向 $timeout 函数提供持续时间参数，因此它会立即执行。这可能是在 ng-repeat 完成数据渲染之前执行的，因此看起来什么也没有发生。作为测试，您可以尝试向 $timeout 函数添加较大的延迟，看看是否会产生影响。如果确实如此，那么您将需要在知道项目已显示后想出一种触发此操作的方法。

$timeout(function () {
    console.log('in timeout');
    $scope.highlightRows();
}, 2000);

此外，我强烈建议您不要在 Controller 中执行任何 JQuery - 事实上，我强烈建议您根本不要使用 JQuery!

您可以简单地使用 Angular 指令(例如 ng-click 和 ng-class)来完成所有这些逻辑。

<table><tbody><tr ng-repeat="item in items" ng-click="selectItem(item)" ng-class={'focusedRow': item === selectedItem}"><td>{{item.Name}}</td></tr></tbody></table>

然后在你的 Controller 中有 selectItem 方法

$scope.selectItem = function (item) {
    $scope.selectedItem = item;
}