Ansicht wird nicht aktualisiert, nachdem $ scope in Firebase Versprechen aktualisiert wurde

Question

Ich verwende Ionic Framework und Firebase ist mein BaaS.

Controller:

.controller('ProfileCtrl', function($scope, AuthService, DatabaseService) { 
console.info('** ProfileCtrl **'); 
var user = firebase.auth().currentUser; 
$scope.public = {}; 

DatabaseService.getUserPublicInfo(user.uid) 
.then(function(infoSnap) { 
    infoSnap.forEach(function(item) { 
    $scope.public[item.key] = item.val(); 
    }); 
}); 
}) 

Service:

.service('DatabaseService', function($q) { 
    this.getUserPublicInfo = function(uid) { 
    return firebase.database().ref('/users/'+uid+'/public/').once('value'); 
    } 
} 

In meiner HTML-Ansicht ich folgendes haben:

<div><h3>{{public.firstname}} {{public.lastname}}</h3></div> 

kein Fehler, und wenn das Debuggen, $ scope.public.firstname als der richtige Wert darin aber nichts wird angezeigt. Ich habe eine Schaltfläche in meiner HTML-Ansicht; Wenn ich darauf klicke, ändert sich die Seite, aber kurz bevor die Seite wechselt, sehe ich den Vornamen. Wenn ich zu meiner Ansicht zurückkehre, wird der Vorname gut angezeigt.

Ich versuchte getUserPublicInfo in $ Umfang zu wickeln. $ Apply() in meinem Controller aber ich habe den "$ Digest bereits im Gange" Fehler ...

Bitte helfen Sie, es macht mich verrückt!

Vielen Dank im Voraus

Answer 1

Ich habe $ q verwendet, um ein Versprechen zu erstellen. Dadurch wird die anfängliche Firebase Versprechen im Angular Umfang aufgelöst:

this.getUserPublicInfo = function(uid) { 
    console.info('getUserPublicInfo - get user public information for uid: '+uid); 
var deferred = $q.defer(); 

    firebase.database().ref('/users/'+uid+'/public/').once('value') 
    .then(function(snap) { 
    deferred.resolve(snap); 
    }) 
    .catch(function(error) { 
    deferred.reject(error); 
    }); 

    return deferred.promise; 
} 

Answer 2

Um resove "$ Digest bereits im Gange" Fehler ... $ Rahmen setzen. $ Sprudelnd innerhalb Timeout-Service.

DatabaseService.getUserPublicInfo(user.uid) 
.then(function(infoSnap) { 
    infoSnap.forEach(function(item) { 
    $scope.public[item.key] = item.val(); 
    $timeout(function(){ 
     $scope.$apply() 
},1) 
    }); 
}); 

Edit 1: Das Versuchen Sie, mit $scope.$apply() zu vermeiden. Ich habe es nicht getestet. Aber es sollte funktionieren.

DatabaseService.getUserPublicInfo(user.uid) 
    .then(function(infoSnap) { 
    $scope.updatePublic(infoSnap) 
     }); 
    }); 


$scope.updatePublic = function (infoSnap) { 
    infoSnap.forEach(function(item) { 
     $scope.public[item.key] = item.val(); 
}) 
}