Am I binding in angularfire (angular+firebase) correctly?

Question

Hi y'all I'm trying out angular and firebase together for some cool 3 way binding action, but I'm running into some problems with binding. I don't really know how the objects ($scope and $firebase) should look like before being binded together. Right now, if I change through firebase, I am able to to see the change in my DOM almost immediately, but I need to be able to do some crud from DOM to FB for some real 3 way binding. Maybe I'm doing this completely wrong. :/

Here's what I have:

html (this creates a huge grid of 400 squares based off of my $scope.myGrid which is a $scope object referencing a $firebase object)

<div class="square" ng-repeat="(position, hex) in myGrid" style="background-color:{{hex}}" ng-click="squareClick({{position}})">

my Controller (anonymous fxn makes my $scope.myGrid object.)

$scope.paletteColor = "#f00";


    //FIREBASE
    var ref = new Firebase("https://MyAPP.firebaseio.com/");
    //angularfire ref to the data
    var sync = $firebase(ref);
    //download the data into a local object
    var syncObject = sync.$asObject();
    console.log(syncObject); // firebase object is composed of root node with 400 child nodes with key:value like 01-01:"#f00", 01-02: "#ff0" which is exactly how my $scope.myGrid object looks like
    $scope.myGrid = syncObject;

// binding Part taken from the docs which is a huge mystery to me.
//        syncObject.bindTo($scope, "myGrid").then(function(){
//            console.log($scope.myGrid);
//            $scope.myGrid. = "baz";
//            ref.$set({foo:"baz"});
//        });

rtucker88 · Accepted Answer · 2014-10-27 03:12:10Z

1

You do need to use the syncObject.bindTo syntax as you listed in the comment. This sets up the three-way binding. See this note from the official documentation below:

While 3-way bindings can be extremely convenient, be careful of trying to use them against deeply nested tree structures. Stick to practical uses like synchronizing key-value pairs.

If you need more functionality than basic key-value pairs you may want to look into extending Firebase factories. You can find it in the documentation at https://www.firebase.com/docs/web/libraries/angular/guide.html#section-extending-factories.

answered Oct 27, 2014 at 3:12

rtucker88

9848 silver badges15 bronze badges

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

7 Comments

pyramidface Over a year ago

Yeah, I know I have to use bindTo, but I can't figure out how to actually write out all the details. When I use the bindTo without the then statement, I get an error:/

rtucker88 Over a year ago

What if you remove $scope.myGrid = syncObject;. I think it may error because something is already assigned the the scope variable.

pyramidface Over a year ago

I was using that line for testing purposes, but yeah I'll remove it.I figured out something very important though haha I didn't put a $ in front of $bindTo hahahaha

pyramidface Over a year ago

but now I'm wondering do I have to define interactions between the $firebase obj and $scope obj inside the then function like they show in the documentation example? I have a ng-click triggered function written outside which changes a value for one of the keys in $scope.myGrid. I was hoping since the two objects are now bound, this would automatically update firebase, but it doesn't.

rtucker88 Over a year ago

What does the ng-click function look like? The three way binding should work as you want it to.

|

Collectives™ on Stack Overflow

Am I binding in angularfire (angular+firebase) correctly?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related