Wywołania zwrotne bazy ogniowej i AngularJS
Uczę się AngularJS w połączeniu z Firebase. Naprawdę walczę zon
wywołanie zwrotne Firebase i próba aktualizacji$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});
};
});
Jeśli wezmę$rootscope.$apply
to działa zgodnie z oczekiwaniami, ale nie aktualizuje DOM na stronie ładowania.
Dzięki!
AKTUALIZACJA
Rozwiązanie 1 - Usuń$rootscope.$apply
w usłudze i wstrzyknąć i zastosować$timeout
do kontrolera:
firebaseService.on('child_added',function(data){
$timeout(function(){
$scope.messages.push(data.val());
},0);
});
Rozwiązanie 2 - Zaimplementuj metodę „SafeApply” (dziękiAlex Vanston):
$scope.safeApply = function(fn) {
var phase = this.$root.$phase;
if(phase == '$apply' || phase == '$digest') {
fn();
} else {
this.$apply(fn);
}
};
Chociaż oba te elementy działają i nie mają zbyt dużego kodu, uważam, że są zbyt hackie. Czy nie ma jakiegoś oficjalnego sposobu kątowego do obsługi wywołań zwrotnych Async?
Kolejny świetny przykład, który znalazłem w podobnej sytuacji:HTML5Rocks - AngularJS i Socket.io