Firebase 3-channel data binding does not work properly

Question

I have an AngularJS service that returns firebase refb.

.factory('sessionManager', ['$firebase','$scope', function($firebase){ var ref=new Firebase('https://telechat.firebaseio.com/sessions'); return $firebase(ref); }]) 

In the controller, I added a dependency and named $bind .

 $scope.items=sessionManager; $scope.items.$bind($scope,'sessions').then(function(unbind){ unbind(); }); 

But when I print it to the console, the returned data contains a set of functions like $add , $set , .. etc. in addition to the data array.

Why is this happening? Am I doing it wrong?

Answer 1

If I read the question correctly, you might get the impression that $ bind () is converting a $ firebase object to an array or an object with raw data. Essentially, the only difference between an instance of $ firebase and $ bind is that local data changes are automatically returned to Firebase from Angular. If you use $ firebase without $ bind, you need to call $ save for local changes.

Keeping in mind that $ firebase is a Firebase API wrapper and not a simple data array, you can treat it as raw data in most cases.

To iterate data in a Firebase object, you can use ngRepeat:

 <li ng-repeat="(key, item) in $sessions">{{item|json}}</li> 

Or if you want to apply filters that depend on arrays:

 <li ng-repeat="(key, item) in $sessions | orderByPriority | filter:searchText"> 

Or in the controller using $ getIndex:

 angular.forEach($scope.sessions.$getIndex(), function(key) { console.log(key, $scope.sessions[key]); }); 

The methods used $ add / $ update / etc are part of the $ API of the firebase object . The documentation and tutorial should be excellent primers for understanding this process.

It is also part of an API that continues to evolve to better fit Angular's way of doing things and getting feedback from users.