AngularJS: ng-repeat nicht aktualisiert, nachdem Array Aktualisierung

Question

I Ionic Rahmen bin mit, und zu versuchen, eine Liste der „Karte“ Elemente Code mit dem folgenden HTML anzuzeigen:

<div ng-repeat="case in cases"> 

    <div class="list card"> 

     <div class="item item-avatar"> 
     <button ng-click="rmpost(card.key)" style="background: transparent; border: none;"><i class="icon ion-close-round"></i></button><!--if (dataSnapshot.val().volunteer_email == firebase.auth().currentUser.email)--> 
     <h2>{{card.volunteer_name}} ({{card.volunteer_email}})</h2> 
     <p>{{card.title}} ({{card.creationdate}})</p> 
     </div> 

     <div class="item item-body"> 
     <img class="full-image" src={{card.snapshot}}> 
     <p>{{card.message}}</p> 
     </div> 

    </div> 

     </div> 

Das ist mein JS Code innerhalb der Controller für die Aktualisierung der Fälle Array verwendet:

.controller('campaignslookCtrl', function($rootScope, $scope, $cordovaGeolocation, $state, $ionicPopup, Util) 
     { 
      $scope.reload = function() 
      { 
      $scope.reload(); 
      } 

      $scope.rmpost = function(key) 
      { 
       alert("rmpost"); 
      } 

      $scope.cases = []; 

      //... 

    firebase.database().ref('/cases') 
     .on('child_added', function(dataSnapshot) 
      { 

      $scope.cases.push({key: dataSnapshot.key, 
            volunteer_name: dataSnapshot.val().volunteer_name, 
            volunteer_email: dataSnapshot.val().volunteer_email, 
            title: dataSnapshot.val().title, 
            creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(), 
            snapshot: dataSnapshot.val().snapshot, 
            message: dataSnapshot.val().message}); 

}); 
//.. 
}) 

die $ scope.cases wurde auch angezeigt, wenn auf einen konstanten Wert initialisiert wird, aber wenn (über $ push) dynamisch aktualisiert wird, nichts wird angezeigt.

Answer 1

Das Problem ist, dass Sie Ihr Modell außerhalb des Winkel Kontext sind zu aktualisieren. Die Daten haben sich geändert, aber angular hat nicht den eigenen internen Digest ausgeführt und wurde nicht darauf hingewiesen, dass Änderungen in Ihrem Modell aufgetreten sind.

firebase.database().ref('/cases') 
     .on('child_added', function(dataSnapshot) //FIREBASE EVENT NOT WITHIN ANGULAR CONTEXT 

Sie müssen winkel $scope.$apply Methode verwenden.

https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope # $ gelten

gelten $ ([exp]); $ apply() wird verwendet, um einen Ausdruck im Winkel von außerhalb des Winkelgerüsts auszuführen. (Zum Beispiel von Browser DOM Ereignisse, setTimeout, XHR oder Bibliotheken von Drittanbietern). Weil wir sind Aufruf in den eckigen Rahmen müssen wir den richtigen Umfang Lebenszyklus der Ausnahmebehandlung durchführen, Ausführen von Uhren.

Hier ist, wie $scope.$apply zu verwenden, um in einem gültigen Winkel Kontext zu bekommen und dann die Daten aktualisieren:

firebase.database().ref('/cases') 
     .on('child_added', function(dataSnapshot) 
      { 
       $scope.$apply(function() { 
        //we are now within the angular context, so any updates to the model with be handled correctly 
        $scope.cases.push({key: dataSnapshot.key, 
            volunteer_name: dataSnapshot.val().volunteer_name, 
            volunteer_email: dataSnapshot.val().volunteer_email, 
            title: dataSnapshot.val().title, 
            creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(), 
            snapshot: dataSnapshot.val().snapshot, 
            message: dataSnapshot.val().message}); 
       }); 
}); 

Sie theoretisch $scope.$digest manuell aufrufen können, aber dieses ist nicht‘empfohlen nach den Winkel docs. $apply leitet Ausnahmen korrekt weiter und ermöglicht auch die Verarbeitung von Beobachtern. Es ist im Allgemeinen besser, diese Methode zu verwenden als $digest auf eigene Faust zu behandeln.

$ digest(); Verarbeitet alle Beobachter des aktuellen Bereichs und seine Kinder. Da der Listener eines Beobachters das Modell ändern kann, ruft $ digest() die Beobachter auf, bis keine weiteren Listener mehr feuern. Dies bedeutet, dass es möglich ist, in eine Endlosschleife zu gelangen. Diese Funktion wird 'Max. Iterationslimit überschritten.' wenn die Anzahl von Iterationen übersteigt 10.

Normalerweise nennt man nicht $ verdauen() direkt in Steuerungen oder in Richtlinien. Stattdessen sollten Sie $ apply() aufrufen (normalerweise aus einer Direktive), was ein $ digest() erzwingt.

Answer 2

Sie müssen Ihre push Anruf in $apply Methode wickeln. Weil Sie Ihr Array-Element außerhalb des angularen Bereichs (vom Firebase-Callback) hinzufügen.

Versuchen Sie Folgendes:

... 
firebase.database().ref('/cases') 
     .on('child_added', function(dataSnapshot) 
      { 
       $scope.$apply(function() { 
        $scope.cases.push({key: dataSnapshot.key, 
            volunteer_name: dataSnapshot.val().volunteer_name, 
            volunteer_email: dataSnapshot.val().volunteer_email, 
            title: dataSnapshot.val().title, 
            creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(), 
            snapshot: dataSnapshot.val().snapshot, 
            message: dataSnapshot.val().message}); 

       }); 
      }); 
... 

Answer 3

gleiche Antwort, dass MaKCbIMKo.

Ich möchte hinzufügen, dass es diese einfacher zu lesen Alternative:

$scope.cases.push({key: dataSnapshot.key, 
           volunteer_name: dataSnapshot.val().volunteer_name, 
           volunteer_email: dataSnapshot.val().volunteer_email, 
           title: dataSnapshot.val().title, 
           creationdate: '',//(new Date(dataSnapshot.val().creationdate)).toString(), 
           snapshot: dataSnapshot.val().snapshot, 
           message: dataSnapshot.val().message}); 

$scope.digest();