CODEWITHSUNDEEP
angularjsfirebaseangularfire
Rafff
Rafff

Reputation: 1518

Async load data into controller

I'm currently learning AngularJS and similar stuff, and today I've encountered a problem (probably with async). What I'm trying to do, is to use an Angular factory to get some data from Firebase and then use the data in a controller.

App.factory('Jobs', ['$firebaseObject', function($firebaseObject) {
  var ref = new Firebase('https://myapp.firebaseio.com/Jobs');
  return $firebaseObject(ref);
}]);

App.controller('JobsController', ['$scope', 'Jobs', function($scope, Jobs) {
  Jobs.$bindTo($scope, 'allJobs');
  console.log($scope.allJobs);
}]);

This is working pretty OK. When I put {{ allJobs | json }} in a template- it is updated after few seconds. The problem is that in the controller $scope.allJobs is returning undefined (probably because the response from Firebase arrived later than the code has been executed.

My question is, how to write it, so I can access $scope.allJobs directly in the controller?

Upvotes: 1

Views: 221

Answers (2)

jbdev
jbdev

Reputation: 751

You could do something like this:

App.factory('Jobs', ["$firebaseObject",
function($firebaseObject) {
        // create a reference to the Firebase where we will store our data
        return function(url){

           var ref = new Firebase(url);
           // this uses AngularFire to create the synchronized array
           return $firebaseObject(ref);

        };
    }
  ]);

Then in your controller:

App.controller('JobsController', ['$scope', 'Jobs', function($scope, Jobs) {
    $scope.allJobs = Jobs('https://myapp.firebaseio.com/Jobs');
    $scope.allJobs.$loaded().then();
}]);

This is showing the $loaded method as opposed to $bindTo. As the other answers/comments mention, $bindTo may be the better way to go.

Upvotes: 2

Rafff
Rafff

Reputation: 1518

Referencing to this Firebase documentation: https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebaseobject-bindtoscope-varname

I can just do it very very simple:

App.controller('JobsController', ['$scope', 'Jobs', function($scope, Jobs) {
  Jobs.$bindTo($scope, 'allJobs').then(function() {
    // now I have access to $scope.allJobs when everything is downloaded from Firebase
  });
}]);

Upvotes: 1

Related Questions