Wie aktualisiert man DOM vom $ firebaseArray scope?

Question

Wie kann ich DOM innerhalb eines $ firebaseArray aktualisieren?
Momentan wird das DOM nicht aktualisiert, bis die Schleife fertig ist.

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

das gleiche, wenn ich benutze:
ref_read_path.once ("value", Funktion (tripPath) {...} von Firebase

Answer 1

Wenn Sie $loaded() implementieren, wird Ihr Code in einem Moment ausgeführt, in dem Angular dies nicht mehr weiß Bereich, führen Sie den Code im Digest-Zyklus mit $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; 
      } 
     } 
    }); 
})