AngularFire $remove item from Array using a variable in Firebase reference does not work

Question

I've been struggling with the following problem:

I'm trying to delete a 'Post' item from a Firebase Array with the $remove AngularFire method which I have implemented in a Angular Service (Factory). This Post is a child of 'Event', so in order to delete it I have to pass this Service a argument with the relevant Event of which I want to delete the post.

This is my controller:

app.controller('EventSignupController', function ($scope, $routeParams, EventService, AuthService) {
  // Load the selected event with firebase through the eventservice
  $scope.selectedEvent = EventService.events.get($routeParams.eventId);

  // get user settings
  $scope.user =  AuthService.user;
  $scope.signedIn = AuthService.signedIn;

  // Message functionality
  $scope.posts = EventService.posts.all($scope.selectedEvent.$id);

  $scope.post = {
    message: ''
  };
  $scope.addPost = function (){
    $scope.post.creator = $scope.user.profile.username;
    $scope.post.creatorUID = $scope.user.uid;
    EventService.posts.createPost($scope.selectedEvent.$id, $scope.post);
  };

  $scope.deletePost = function(post){
    EventService.posts.deletePost($scope.selectedEvent.$id, post);
    // workaround for eventService bug:
    // $scope.posts.$remove(post);
  };
});

And this is my Service (Factory):

app.factory('EventService', function ($firebase, FIREBASE_URL) {
  var ref = new Firebase(FIREBASE_URL);
  var events = $firebase(ref.child('events')).$asArray();

  var EventService = {
    events: {
      all: events,
      create: function (event) {
        return events.$add(event);
      },
      get: function (eventId) {
        return $firebase(ref.child('events').child(eventId)).$asObject();
      },
      delete: function (event) {
        return events.$remove(event);
      }
    },
    posts: {
      all: function(eventId){
        var posts = $firebase(ref.child('events').child(eventId).child('posts')).$asArray();
        return posts;
      },
      createPost: function (eventId, post) {
        // this does work
        var posts = $firebase(ref.child('events').child(eventId).child('posts')).$asArray();
        return posts.$add(post);
      },
      deletePost: function (eventId, post) {
        // this does not work
        var posts = $firebase(ref.child('events').child(eventId).child('posts')).$asArray();
        return posts.$remove(post);
      }
    }
  };

  return EventService;
});

When I try to delete the link tag just freezes and no error logging appears in the console. While if I call $remove on my $scope.posts directly in my controller it magically works.. Furthermore my Post is not removed from my Firebase DB.

Another weird thing is that 'CreatePost' works perfectly fine using the same construction.

My view:

 <div class="col-xs-8 col-xs-offset-2 well">
        <form ng-submit="addPost()" ng-show="signedIn()">
          <input type="text" ng-model="post.message" />
          <button type="submit" class="btn btn-primary btn-sm">Add Post</button>
        </form>
        <br>
        <div class="post row" ng-repeat="post in posts">
          <div>
            <div class="info">
                {{ post.message }}
            </div>
            <div>
              <span>submitted by {{ post.creator }}</span>
              <a href="" ng-click="deletePost(post)" ng-show="user.uid === post.creatorUID">delete</a>
            </div>
            <br>
          </div>
        </div>
      </div>

P.s. I'm not too sure that my 'Service' is implemented in the best possible way.. I couldn't find another solution for doing multiple firebase calls

var posts = $firebase(ref.child('events').child(eventId).child('posts')).$asArray();

within the Post part of my EventService, because it depends on eventId in each CRUD operation. Any ideas would be very welcome :)

Answer 1

The easiest way for me was to use this:

var ref= new Firebase('https://Yourapp.firebaseio.com/YourObjectName');
ref.child(postId).remove(function(error){
    if (error) {
    console.log("Error:", error);
  } else {
    console.log("Removed successfully!");
  }
});

Answer 2

The only way I'm able to remove the item is using a loop on the array we get from firebase.

var ref= new Firebase('https://Yourapp.firebaseio.com/YourObjectName');
var arr_ref=$firebaseArray(ref);
    for(var i=0;i<arr_ref.length;i++){
        if(key==arr_ref[i].$id){
            console.log(arr_ref[i]);
            arr_ref.$remove(i);
        }
    }