AngularJS $ timeout parfois fonctionne parfois

Question

Je rencontre des problèmes avec AngularJS et $ timeout.
Je dois exécuter du code, une fois la page chargée. Http.get() charge les éléments et ng-repeat les affiche dans la table. Ensuite, je dois exécuter le code pour mettre en évidence la ligne lorsque je clique dessus.

J'ai trouvé une solution pour cela en utilisant $ timeout.

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

cela ne fonctionne pas, mais pas à chaque fois. Dans la fonction je consigner le nombre de lignes dans la table et parfois je reçois 0, donc le gestionnaire de clic n'est pas enregistré et la surbrillance ne marche pas.

$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"); 
    }); 
}; 

Lorsque vous essayez de simuler je dois actualiser par Ctrl + F5.

journal de la console:

in timeout tripsController.js:14 
0 

je ne pouvais pas trouver des solutions à ce problème, des suggestions sera apprécié :) Merci

Mark

EDIT: ceci est mon 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

Cela ressemble à un problème de synchronisation. Comme vous ne fournissez pas de paramètre de durée à la fonction $ timeout, il s'exécute immédiatement. Cela pourrait être en cours d'exécution avant que ng-repeat ait fini de rendre les données, donc rien ne semble se produire. En tant que test, vous pouvez essayer d'ajouter un délai important à la fonction $ timeout pour voir si cela fait une différence. Si c'est le cas, vous devrez alors penser à un moyen de déclencher une fois que vous savez que les éléments ont été affichés.

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

Aussi je serais fortement conseils que vous ne faites pas JQuery dans votre contrôleur - en fait, je vous conseille fortement de ne pas utiliser JQuery du tout!

Vous pouvez effectuer toute cette logique en utilisant simplement des directives angulaires telles que 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> 

Ensuite, dans votre contrôleur ont la méthode selectItem

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