CODEWITHSUNDEEP
javascriptangularjsfirebaseangularfire
pyramidface
pyramidface

Reputation: 1277

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

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"});
//        });

Upvotes: 0

Views: 277

Answers (1)

rtucker88
rtucker88

Reputation: 986

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.

Upvotes: 1

Related Questions