Nested models as AngularFire services/factories

Question

I am trying to figure out how to nest models using factory-model/classes (see here: https://medium.com/opinionated-angularjs/angular-model-objects-with-javascript-classes-2e6a067c73bc) and back the data up with Firebase. For example, lets say I'm trying to make a todo list app and I have a bunch of Lists that have many Tasks that have many Details.

With traditional Angular, I might solve the problem by having a 'ListCtrl' with tasks as a $scope variable represented by an Array. Then the items I store in the array could be Models that I define using a factory 'Task'. Then each Task would be defined with a name and have an array of details which would be instances of another factory 'Detail'.

Each detail would probably just hold a 'description' string.

With this setup, I can happily add "instance methods" to each factory, say change name of a Task or the description of a Detail.

Now enter Firebase. If I replaces each List's tasks array with an $asArray() Firebase array, I lose the instance methods I defined with the factory.

I came across this post which gives me a sense that it is direction I want, but I cant seem to figure out how nesting would work.

Firebase's AngularFire in an AngularJS service

If anything is unclear, I can go into details. Help!

Answer 1

You can customize the factory used by $asArray() to construct your own List/Task class instances rather than simple objects. There is some documentation on extending array factories, be sure to scroll down to check out the WidgetFactory example on the right. I have used this to maintain both a list of the "parent" objects, while allowing each object to maintain Firebase synchronization objects for one or more granular elements of my data model.