Aktualisierung der Scope-Variablen bei Factory-Updates in AngularJS

Question

Ich bin neu bei AngularJS und verwende derzeit Google Firebase für meine Echtzeit-App. Ich habe eine Fabrik „Friends“ erstellt, die mit dem folgenden Code meiner Firebase-Datenbank in Echtzeit überprüft:

angular.module('App') 

.factory('friendsFactory', function(){ 

    var friends = []; 
    var friendshipRef = firebase.database().ref('friendships'); 

    friendshipRef.on('value', function(snapshot){ 

    //etc.. updates friends array 

    }); 

    return{ 
     getFriends: function(){ 
     return friends; 
     }, 
     //etc 
    } 

In meinem Controller ich meinen $scope.friends Variable zu meiner Fabrik Klasse .getFriends() Methode festgelegt. Das funktioniert gut und meine Seite zeigt alle Freunde korrekt an.

Sobald meine Factory aktualisiert wird, spiegeln diese Änderungen jedoch nicht meine Scope-Variable und Ansicht wider. Ich habe versucht, $apply, $watch usw. zu verwenden, aber ich kann nicht herausfinden, wie ich sicherstellen kann, dass mein Bereich und Ansicht aktualisiert werden, sobald die Fabrik ist. Jedes Mal, wenn ich zu einer anderen Seite und zurück navigiere, werden die Änderungen angezeigt. Sie werden nicht in Echtzeit aktualisiert. Kann mir jemand helfen, das zu erreichen? Danke vielmals!

Answer 1

Weil, Sie erhalten die Liste nur einmal, zu Beginn.

Es ist notwendig, $scope.$apply in on Abschnitt zu machen, aber es ist nicht richtig, in der Fabrik zu tun.

Try angularfire

schnelle Lösung zu verwenden, funktioniert:

angular.module('App') 
.factory('friendsFactory', function(){ 

    var friends = []; 
    var friendshipRef = firebase.database().ref('friendships'); 

    friendshipRef.on('value', function(snapshot){ 
     $timeout(function() { 
      //etc.. updates friends array 
     }); 
    }); 

    return{ 
     friends: friends, 
     //etc 
    } 

Und in der Steuerung:

$scope.friends = friendsFactory.friends; 

Answer 2

Sie sollten dies mit angularfire tun, die nicht die Drei-Wege-Bindung zwischen Firebase-Datenbank, Ihr Modell und Ihre Ansicht.

1.Include angularfire in Ihrem Projekt.

2.Aktualisieren Sie Ihre Fabrik entsprechend und Sie müssen nichts tun. Wenn Daten auf dem Knoten friendships in der Firebase-Datenbank aktualisiert werden, werden sie an angularfire gemeldet, und angularfire aktualisiert die lokalen Variablen und ruft $scope.$apply auf. Daher wird die Ansicht ebenfalls aktualisiert.

// factory 
angular.module('App', ['firebase']) 

.factory('friendsFactory', function($firebaseArray){ 
    var friendshipRef = firebase.database().ref('friendships'); 

    return { 
     friends: $firebaseArray(friendshipRef) 
    } 
}); 

// controller 
$scope.friends = friendsFactory.friends;