Firebase callbacks and AngularJS

Question

I am learning AngularJS in conjunction with Firebase. I am really struggling with the on callback of Firebase and trying to update the $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});   
    };
});

If I take the $rootscope.$apply out then it works as expected but it doesn't update the DOM on page load.

Thanks!

UPDATE

Solution 1 - Remove the $rootscope.$apply on the service and inject and apply the $timeout to the controller:

firebaseService.on('child_added',function(data){        
    $timeout(function(){
        $scope.messages.push(data.val());                       
    },0);
});

Solution 2 - Implement a "SafeApply" method (thanks to Alex Vanston):

$scope.safeApply = function(fn) {
        var phase = this.$root.$$phase;
        if(phase == '$apply' || phase == '$digest') {
            fn();
        } else {
            this.$apply(fn);
        }
    };

Although these both work and are not much code I feel they are too hacky. Isn't there some offical Angular manner in which to handle Async callbacks?

Another great example I found for a similar situation: HTML5Rocks - AngularJS and Socket.io

Firebase founder here -- this looks like more of an Angular question of which I only know a little. Sorry to not be more helpful! In the future we hope to have some nice reference examples and possibly a library to support Angular. — Andrew Lee
– Andrew Lee, Commented Oct 25, 2012 at 16:52
Also, you might want to check the Angular Google Group. There's already been some Firebase discussion there, such as this thread: groups.google.com/forum/#!topic/angular/sJzqb6UMVMQ — Andrew Lee
– Andrew Lee, Commented Oct 25, 2012 at 21:30
Very nice to hear from you! I will follow what the topic suggests and try to keep Firebase as a service. Looking forward to your examples and to playing with Firebase some more. Thanks! — MaxWillmott
– MaxWillmott, Commented Oct 26, 2012 at 8:30

MaxWillmott · Accepted Answer · 2012-10-26 08:30:52Z

8

Solution 1 - Remove the $rootscope.$apply on the service and inject and apply the $timeout to the controller:

firebaseService.on('child_added',function(data){        
    $timeout(function(){
        $scope.messages.push(data.val());                       
    },0);
});

Solution 2 - Implement a "SafeApply" method (thanks to Alex Vanston):

$scope.safeApply = function(fn) {
        var phase = this.$root.$$phase;
        if(phase == '$apply' || phase == '$digest') {
            fn();
        } else {
            this.$apply(fn);
        }
    };

answered Oct 26, 2012 at 8:30

MaxWillmott

2,2302 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GeekyMonkey Over a year ago

I like this solution, however I'm making one adjustment. Before calling fn(), make sure it's not null or undefined. if (fn) { fn(); }

flyer Over a year ago

Checking the phase value makes me nervous. I would use extreme caution using this method. I wonder if this would be a good time to use $scope.$evalAsync() (which I've used from time to time on event listeners that required a $timeout).

Collectives™ on Stack Overflow

Firebase callbacks and AngularJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related