Cannot $remove in nested controllers with angularfire

Question

I am using angularfire to manage some online courses and I have courses which each have many lectures. I nested the lectures within the courses. I have a factory which successfully allows CRUD operations on my courses but for my lectures, I can do everything except delete. Could someone tell me what I am doing wrong with delete? Thanks so much!

Courses Factory:

angular.module('rutileApp')
  .factory('Course', function ($firebaseArray, $firebaseObject, Ref) {
    var courses = $firebaseArray(Ref.child('courses'));

    var Course = {
      all: courses,
      create: function (course) {
        return courses.$add(course);
      },
      get: function(courseId) {
        return $firebaseObject(Ref.child('courses').child(courseId));
      },
      delete: function(course) {
        return courses.$remove(course);
      }
    };

    return Course;
  });

Lectures Factory:

angular.module('rutileApp')
  .factory('Lecture', function ($firebaseArray, $firebaseObject, Ref) {

    var Lecture = {
      create: function (courseId, lecture) {
        return $firebaseArray(Ref.child('courses').child(courseId)
          .child('lectures')).$add(lecture);
      },
      get: function(courseId, lectureId) {
        return $firebaseObject(Ref.child('courses')
         .child(courseId).child('lectures').child(lectureId));
      },
      fromCourse: function(courseId) {
        return $firebaseArray(Ref.child('courses')
          .child(courseId).child('lectures'));
      },
      delete: function(courseId,lecture) {
        return $firebaseArray(Ref.child('courses').child(courseId)
          .child('lectures')).$remove(lecture);
      }
    };

    return Lecture;
  });

Courses Controller:

$scope.deleteCourse = function (course) {
  Course.delete(course);
};

Course Controller:

$scope.deleteLecture = function (courseId, lecture) {
  Lecture.delete(courseId, lecture);
};

Courses View:

  <table class="table table-striped">
    <thead>
      <tr>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="course in courses">
        <td>
          <button class="btn btn-primary"
                  ng-really-click="deleteCourse(course)"
                  ng-really-message="Are you sure?">
            Delete
          </button>
        </td>
      </tr>
    </tbody>
  </table>

Course View:

<table class="table table-striped">
  <thead>
    <th></th>
  </thead>
  <tbody>
    <tr ng-repeat="lecture in lectures">
      <td>
        <button class="btn btn-primary"
                ng-really-click="deleteLecture(course.$id, lecture)"
                ng-really-message="Are you sure?">
          Delete
        </button>
      </td>
    </tr>
  </tbody>
</table>

This also happens if I do deleteLecture(course.$id, lecture.$id).

This is the code for ng-really if you are curious.

Whyyyyyeeeee take a beautiful, realtime model like Firebase and turn it into a CRUD service? My EYES. Also, just return the instance of $firebaseArray, which already has all the methods you've wrapped it to create. $add, $remove, $getRecord. — Kato
– Kato, Commented May 11, 2015 at 19:36

Mathew Berg · Accepted Answer · 2015-05-11 18:36:15Z

1

Try renaming it from delete to remove, as delete can be a reserved keyword in some javascript languages.

answered May 11, 2015 at 18:36

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Coherent Over a year ago

It confirms that I want to delete the entry but when I say yes, it hasn't deleted it. When I report out the console.log for the course id and the lecture id they correctly report the right indexes. Is it best practice to pass an index into $remove or the firebase object? In my courses, I appear to pass in the object and it deletes it without issue. I switched to remove and it did not fix the issue.

Coherent · Accepted Answer · 2015-05-15 12:55:34Z

I think I sort of got it. For whatever reason, I can use the delete I had above for courses, but for anything nested I need call the $remove within the view itself:

<tr ng-repeat="(id, lecture) in lectures">
    <button class="btn btn-primary"
            ng-really-click="lectures.$remove(lecture)"
            ng-really-message="Are you sure?">
      Delete
    </button>
  </td>
</tr>

The remaining issue is that $remove does not seem to work for anything that is nested. If I use firebase to pull up a nested property of lecture, I cannot use $remove.

<div ng-repeat="(id, lecture) in lectures">
  <div ng-repeat="(id, questions) in lecture.questions">
    <button class="btn btn-primary"
      ng-really-click="lectures.$remove(question)"
      ng-really-message="Are you sure?">
    Delete
    </button>
  </div>
</div>

So the lectures.$remove does not work, what is the right way to handle that?

Collectives™ on Stack Overflow

Cannot $remove in nested controllers with angularfire

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related