AngularFire TypeError: Object # & lt; Object & gt; does not have a push method

advertisements

I'm trying to add a new object to my firebase model. Below is my Angularfire setup:

angular.module('angularApp', ['firebase'])
  .controller('MyCtrl', ['$scope', 'angularFire',
    function MyCtrl($scope, angularFire) {
      $scope.shapes = [];
      var ref = new Firebase('https://angular-starter.firebaseio.com/shapes');
      angularFire(ref, $scope, 'shapes');

      $scope.addShape = function () {
        console.log(typeof $scope.shapes);

        var newShape = {color: "#536993", height: 0, id: 1, left: 0, position: "absolute"};
         $scope.shapes.push(newShape);

      };
    }
  ])

I understand that object don't have a push method but I'm having trouble figuring out how to define the model as array object. I thought $scope.shapes = []; should do the job?


When you bind Firebase to a scope variable, using angularFire, you can't arbitrarily pick a data type. angularFire always works with models (objects), and stores the data as an object.

If your remote data has entirely numeric, and sequential keys, you can simulate array like behavior (although Firebase always stores data as objects, even in this case) by using angularFireCollection, which utilizes arrays for storing values.

Note that even in the case of angularFireCollection, you may not call push(), but instead need to use the built-in add() method.

Also note that angularFire 0.5 is imminent (next week perhaps) and will refine a lot of these confusions.

UPDATE

AngularFire 0.5 was released, so the appropriate method is now $add instead of add and there is no longer a distinction between angularFire and angularFireCollection.