3

我在使用 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">
            ....
4

1 回答 1

9

这看起来像一个时间问题。由于您没有为 $timeout 函数提供持续时间参数，因此它会立即执行。这可能在 ng-repeat 完成呈现数据之前执行，因此似乎没有发生任何事情。作为测试，您可以尝试在 $timeout 函数中添加较大的延迟，看看是否会产生影响。如果是这样，那么一旦您知道项目已显示，您就需要考虑一种触发方式。

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

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

您可以简单地使用 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>

然后在您的控制器中有 selectItem 方法

$scope.selectItem = function (item) {
    $scope.selectedItem = item;
}
于 2014-07-23T06:29:31.580 回答