The problem with the approach above is that it's not going to get updated whenever the original o
object changes. Thus the t
returned from $scope.decorate is more like a static snapshot than a real-time binding between Firebase and Angular.
One approach would be to write your own service. To simplify this process, use 2-way data binding (e.g. $scope.todos = $firebase(ref)
) vs 3-way (e.g. $firebase(ref).$bind($scope, 'todos')`), which will make the overall process of adapting this much simpler.
Example:
app.factory('DecoratedObject', function($timeout) {
return function(ref1, ref2) {
var self = this;
this.data = {};
this.getData = function() {
return data;
};
this.save = function(fieldsForRef1, fieldsForRef2) {
ref1.set( _.pick(data||{}, fieldsForRef1);
ref2.set( _.pick(data||{}, fieldsForRef2);
};
this.dispose = function() {
ref1.off('value', dataUpdated);
ref2.off('value', dataUpdated);
};
function dataUpdated(snap) {
// $timeout forces Angular to run $apply and update the DOM
$timeout(function() {
_.extend(self.data, snap.val());
});
}
};
});
// and to use it
var obj = new DecoratedObject(ref1, ref2);
$scope.todos = obj.getData();
A more sophisticated approach would be to use a join lib like Firebase.util and skip the extra work:
// create a joined ref between two paths, which behaves just like a single ref
var ref = Firebase.join( ref1, ref2 );
// use it to create your angularFire object
$scope.todos = $firebase( ref );