Comment mettre à jour DOM à partir de $ firebaseArray portée?

Question

Comment je peux mettre à jour DOM à partir d'un $ firebaseArray?
Actuellement, le DOM ne se met pas à jour tant que la boucle n'est pas terminée.

HTML

<div>{{trip.load_progress}}% Loading</div> 

AngularJS:

$scope.syncArray = $firebaseArray(ref_read_path); 
      $scope.trip = {}; 
      $scope.trip.load_progress = 1; 
      $scope.syncArray.$loaded().then(function(items) { 
        for(var z = 0 ; z < items.length ; z++) { 
         var percentage = Math.round(items.length/100); 
         if (z == percentage * $scope.trip.load_progress) { 
           $scope.trip.load_progress = $scope.trip.load_progress + 1; 
         } 
        } 
      }) 

Le même lors de l'utilisation:
ref_read_path.once ("valeur", fonction (tripPath) {...} de Firebase

Answer 1

En implémentant $loaded() votre code s'exécute à un moment où Angular n'en a plus conscience. portée, exécutez le code dans le cycle de résumé en utilisant $timeout():

$scope.syncArray = $firebaseArray(ref_read_path); 
$scope.trip = {}; 
$scope.trip.load_progress = 1; 
$scope.syncArray.$loaded().then(function(items) { 
    $timeout(function() { 
     for(var z = 0 ; z < items.length ; z++) { 
      var percentage = Math.round(items.length/100); 
      if (z == percentage * $scope.trip.load_progress) { 
        $scope.trip.load_progress = $scope.trip.load_progress + 1; 
      } 
     } 
    }); 
})