Firebase-Rückrufe und AngularJS
Ich lerne AngularJS in Verbindung mit Firebase. Ich kämpfe wirklich mit demon
Rückruf von Firebase und versuchen, die zu aktualisieren$scope
...
$apply already in progress <----
var chat = angular.module('chat', []);
chat.factory('firebaseService', function ($rootScope) {
var firebase = {};
firebase = new Firebase("http://gamma.firebase.com/myUser");
return {
on: function (eventName, callback) {
firebase.on(eventName, function () {
var args = arguments;
$rootScope.$apply(function () {
callback.apply(firebase, args);
});
});
},
add: function (data) {
firebase.set(data);
}
};
});
chat.controller ('chat', function ($scope, firebaseService) {
$scope.messages = [];
$scope.username;
$scope.usermessage;
firebaseService.on("child_added",function(data){
$scope.messages.push(data.val());
});
$scope.PushMessage = function(){
firebaseService.add({'username':$scope.username,'usermessage':$scope.usermessage});
};
});
Wenn ich das nehme$rootscope.$apply
Dann funktioniert es wie erwartet, aber das DOM wird beim Laden der Seite nicht aktualisiert.
Vielen Dank!
AKTUALISIEREN
Lösung 1 - Entfernen Sie die$rootscope.$apply
auf den Dienst spritzen und auftragen$timeout
zum Controller:
firebaseService.on('child_added',function(data){
$timeout(function(){
$scope.messages.push(data.val());
},0);
});
Lösung 2 - Implementieren Sie eine "SafeApply" - Methode (danke anAlex Vanston):
$scope.safeApply = function(fn) {
var phase = this.$root.$phase;
if(phase == '$apply' || phase == '$digest') {
fn();
} else {
this.$apply(fn);
}
};
Obwohl beide funktionieren und nicht viel Code sind, empfinde ich sie als zu hackig. Gibt es nicht eine offizielle Angular-Methode, um asynchrone Rückrufe zu verarbeiten?
Ein weiteres gutes Beispiel, das ich für eine ähnliche Situation gefunden habe:HTML5Rocks - AngularJS und Socket.io