0

I've been looking at the documentation for Synchronized Arrays https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-extending-the-services and https://www.firebase.com/docs/web/libraries/angular/guide/extending-services.html#section-firebasearray

I'm using Firebase version 2.2.7 and AngularFire version 1.1.2

Using the code below, I'm having trouble recognizing $$removed events.

.factory("ExtendedCourseList", ["$firebaseArray",  function($firebaseArray) {
  // create a new service based on $firebaseArray
  var ExtendedCourseList= $firebaseArray.$extend({
    $$added: function(dataSnapshot, prevChild){
        var course = dataSnapshot.val();
        var course_key = dataSnapshot.key();
        console.log("new course");
        return course;
    },
    $$removed: function(snap){
        console.log("removed");
        return true;
    }
  });
  return function(listRef) {      
    return new ExtendedCourseList(listRef);
  } 
}]) 
  
.factory("CompanyRefObj", function(CompanyRef) {
  //CompanyRef is a constant containing the url string  
  var ref = new Firebase(CompanyRef);
  return ref;
})

.factory('CourseList', function (localstorage,$rootScope,ExtendedCourseList,CompanyRefObj) {
    var companyID = localstorage.get("company");   
    $rootScope.courseList = ExtendedCourseList(CompanyRefObj.child(companyID).child("courses")); 
)

If I run this code, only the $$added events will be triggered. To simulate the remove events I use the web-interface at Firebase to display data, where I press the remove button and accept the data being deleted permanently.

Additionally, if I delete the $$removed function, the extended service still won't synchronize when a record is deleted.

If I modify my code to use the $firebaseArray instead of extending the service (as seen above) both add and remove events will be recognized.

 .factory('CourseList', function (localstorage,$rootScope,$firebaseArray,CompanyRefObj) {
    var companyID = localstorage.get("company");   
    $rootScope.courseList = $firebaseArray(CompanyRefObj.child(companyID).child("courses")); 
)

Finally, are there any bad practices I've missed that can cause some of the extended functions to not work?

Solved

$$added: function(dataSnapshot, prevChild){
    var course = dataSnapshot.val();
    var course_key = dataSnapshot.key();
    //Modified below
    course.$id = course_key;
    //End of modification
    console.log("new course");
    return course;
}
Community
  • 1
  • 1
AndersRehn
  • 137
  • 1
  • 1
  • 6
  • 1
    After posting about the issue at firebase/angularfire github I received an [answer](https://github.com/firebase/angularfire/issues/638) that solved my issue. When **$$added** got overridden by the code provided, the $firebaseArray also lost its internal method **$id**. By adding this line of code: **course.$id = course_key;** before returning the course made angularfire recognize when the record was removed from the server. – AndersRehn Jul 16 '15 at 15:12
  • Great to hear Anders. Can you post the same as an answer, so that it's clear that this question is answered? – Frank van Puffelen Jul 16 '15 at 21:49

1 Answers1

2

After posting about the issue at firebase/angularfire github I received an answer that solved my issue. When $$added got overridden by the code provided, the $firebaseArray also lost its internal record $id.

Adding this line of code: course.$id = course_key; before returning the course, made AngularFire recognize when the record was removed from the server.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
AndersRehn
  • 137
  • 1
  • 1
  • 6