CODEWITHSUNDEEP
javascriptangularjsfirebaseangularfire
rob
rob

Reputation: 18513

How to delete angularfire object after calling $bindTo

How do you delete an object from firebase after calling angularfire's $bindTo() on the object. For some reason calling $bindTo() seems to remove the $remove() function from the object.

For example the delete button in the following app doesn't work unless you comment out the $bindTo line.

Codepen

JS

var app = angular.module('myApp', ['firebase']);

app.controller('myCtrl', MyCtrl);

function MyCtrl($scope, $firebaseObject) {
  var self = this;
  this.test = $firebaseObject(new Firebase('https://bindtoissue.firebaseio-demo.com/test'));

  //if you comment out this line then the delete button will work.
  this.test.$bindTo($scope, 'ctrl.test');

  this.test.$loaded(function() {
    self.test.one = 1;
    self.test.two = 2;
    self.test.three = 3;
  });
}

MyCtrl.prototype.delete = function() {
  //$remove is undefined
  this.test.$remove();
}

HTML

<div ng-app="myApp" ng-controller="myCtrl as ctrl">
    <button ng-click="ctrl.delete()">delete</button>
    <pre>{{ctrl.test | json}}</pre>
</div>

Upvotes: 2

Views: 399

Answers (1)

Kato
Kato

Reputation: 40582

Note that $bindTo() does not put the synchronized object on the scope, just the data. In this case, you have put the synchronized $firebaseObject at this.test, and then also bound the data to this.test.

Note that there is no reason, in this example, to utilize $bindTo(). You can call $remove() without creating a 3-way binding, which is only useful for making local changes to the object when you don't want to call $save() manually.

Also, the usage of $loaded is incorrect here. When you use $bindTo(), you'll want to use the promise it returns instead.

this.test.$bindTo($scope, 'ctrl.test')
  .then(function() {
    self.test.one = 1;
    self.test.two = 2;
    self.test.three = 3;
  });

Upvotes: 1

Related Questions