Angular model lifecycle state: dirty and in-flight records

4
votes

In angular, there doesn't seem to be a built-in way to store model lifecycle state, that is, the state that is due to it being an asynchronous and potentially out of date copy of a remote model stored on the server, or where the server would be out of date compared to the client. Looking at how Ember does it, at http://emberjs.com/guides/models/model-lifecycle/ , they have a number of states for Model objects:

  • LOADING
  • LOADED/CLEAN
  • DIRTY
  • IN-FLIGHT
  • INVALID
  • ERROR

Angular's models seem to just be plain old Javascript objects, and so don't have this. Looking at $resource, which seems to be closer to what I'm looking for, doesn't seem to have anything to do with state either. My aim is to make it clear to the user when something needs to be saved to the server, and the result of any such saving.

  • What would be a good way of doing this?
  • Are there any existing libraries for this, or would I have to roll my own?

Edit: I'm not referring the DOM being out of date compared to the model in the memory of the browser. I understand the Angular handles all that as the 2 way data binding as explained at http://docs.angularjs.org/guide/dev_guide.templates.databinding . This is handling the states when the model might itself be different compared to the server.

1
ajaxangularjsmodelember.js
"Angular's models seem to just be plain old Javascript objects". Yes, that was a design decision. When $digest runs on a scope, though, model validity is tested. Angular does track dirtiness and validity for model objects using the digest cycle. "My aim is to make it clear to the user when something needs to be saved to the server, and the result of any such saving" Huh? you have dirty/clean and valid/invalid. The other states you list from Ember seem to be about intermediate states during round-tripping with the server -- are you having trouble keeping track of $http/$resource calls? - laurelnaiad
"The other states you list from Ember seem to be about intermediate states during round-tripping with the server". Yes, that's exactly what I'm talking about. I understand that Angular handles dirtness-checking between the model objects and the DOM, so that the DOM is always up to date, and I have no problem or question about that. I mean when the model has changed in the browser, but not yet persisted to the server, or when it might be updated in the browser due to an in-progress $http/$resource call. I'll edit the question to make this a bit clearer. - Michal Charemza
Angular tracks pristine/dirty on models, too. Since you're in charge of when $http/$resource calls happen and have a place for handlers that know when those calls complete (or fail), I'd think you have all the information you need. I guess I'm missing something. - laurelnaiad

1 Answers

1
votes

Did you have a look at the form directive ? You can check whether it's pristine, dirty, valid etc... This could fulfill your need to "make it clear to the user when something needs to be saved to the server". I don't really know what you mean by "the result of any such saving.", but based on the state of the form, you could display anything you want.