CODEWITHSUNDEEP
javascriptangularjsfirebaseangularfire
Conqueror
Conqueror

Reputation: 4433

angularfire, callback on retrieved data

I want to call a function once I get my firebase data back, however, I don't see any promises function like then on the ref object. Any suggestion? Here is my code:

angular.module('myMod', ['firebase']).controller('myCtrl', ['$scope', '$firebase',
    function($scope, $firebase) {
        var ref = new Firebase('myfirebaseurl');

        $scope.data = $firebase(ref);

        // i want to do something like
        data.then(function(){
           someFunc();
        });

        // or something like
        $scope.$watch('data', function(){
            if($scope.data.desiredProperty) {
              doSomething();
            }
        });
    }]);

Upvotes: 7

Views: 2943

Answers (3)

Matt
Matt

Reputation: 6330

I wasted a sizeable chunk of time trying to do everything with Angularfire when in reality most of the Firebase functionality is more easily implemented without it.

To do what you require, I would suggest the following: 

var ref = new Firebase('myfirebaseurl');  // get your ref

// Called once with the initial data and again every time the data changes
ref.on("value", function(data) {
  $scope.data = data.val();
  someFunc();
});

The code above satisfies your need. It will be called once when the data is retrieved, and again any time the data is updated. If you only want to call it the function the first time the data is loaded you can use: 

ref.once("value", function(data) { ... });

Upvotes: 2

Saeed D.
Saeed D.

Reputation: 1176

You need to use a combination of $loaded and $watch promises to process the data that is returned from Firebase. For additional information please check out AngularFire Documentation.

Try the following code if your data is an object. Watching for changes in collections is a bit different, but basically the same. 

angular.module('myMod', ['firebase'])
  .controller('myCtrl', ['$scope', '$firebase', function ($scope, $firebase) {

    var data = $firebase(new Firebase(URL));

    //to take an action after the data loads, use the $loaded() promise

    data.$loaded.then(function () {
        console.log("loaded record:", data.$id, data.otherData);
        someFunc();

    //Register an event listener which will be notified any time there is a change to the data.

        data.$watch(function (event) {
            console.log(event);
            if (data.desiredProperty) {
                doSomething();
            }
        });
    });

    //For three-way data bindings, bind it to the scope instead

    data.$bindTo($scope, "data");
}]);

I usually end up using some of the AngularFire binding and mix it with the methods provided with the core Firebase SDK.

Upvotes: 0

ajk
ajk

Reputation: 4603

AngularFire provides event handlers for the 'loaded' and 'changed' events. From the annotated source:

object.$on = function(type, callback) {
  switch (type) {
  case "change":
    self._onChange.push(callback);
    break;
  case "loaded":
    self._onLoaded.push(callback);
    break;
  default:
    throw new Error("Invalid event type " + type + " specified");
  }
};

So you should be able to do something like this:

var ref = new Firebase('myfirebaseurl');

$scope.data = $firebase(ref);

$scope.data.$on('loaded', function(){
    if($scope.data.desiredProperty) {
      doSomething();
    }
});

Edit:

It looks like when the AngularFire loaded event triggers, the $scope.data object is not yet completely populated. This appears to be a known issue, but there are some ways to work around it.

Access the data as a parameter to your loaded callback function:

$scope.data.$on("loaded", function(data) {
  console.log(data);
}

Skip AngularFire altogether and hit the Firebase API directly:

ref.on("value", function(data) {
  console.log(data.val());
}

Upvotes: 0

Related Questions