AngularFire equivalent to $setPristine?

Question

I'm trying to understand the correct workflow to create a $setPristine equivalent with my Firebase data.

My workflow is as follows:

1) Create Firebase object (via the Angularfire Generator 'SyncData')

2) Form data modifies the $firebase object.

3) To update the remote model, I use myRef.$save()

All of that works well. Now, I'm trying to add a "reset" button on the form, so that the locally modified data will revert back to the remotely stored data.

So far, I'm running into problems. I've tried reinitializing the firebase reference eg myRef = syncData('/my/path') but not only does that now work, but it is destroying the remote data object!

What is the correct way to re-pull the remote data to use in my Angular model?

Could you simply store the dirty, local data in a separate object? Then when reset is called, update from the $firebase object again? The angularFire change event could help you with syncing the two. — Kato
It would be pretty tedious to individually copy data elements over. But surely there must be some way of re-initializing the remote data structure. — Brian A Bird
@BrianABird - what if you copied using angular.copy() or angular.extend() — Mike Pugh
Also keep in mind that if you are using $bind, and the scope var already exists, that could be what is blowing away your remote data (if a local value, such as an empty object, exists it's pushed to the server). — Kato

DivZero DivZero · Accepted Answer · 2015-10-13T13:51:50

I know this is an old question, but I ran into this issue myself.

After some searching around I found this post: http://grokbase.com/t/gg/firebase-angular/1499haaq4j/editing-data-as-a-copy

Which led me to an outdated code snippet (2 months lol XD) from @Kato: https://gist.github.com/katowulf/8eaa39eab05a4d975cd9

I modified this to work with Firebase 2.3.1 and AngularFire 1.1.3:

app.factory('ResetFactory', function($firebaseArray) {
    return $firebaseArray.$extend({
        reset: function(itemOrIndex) {
            var key, self;
            self = this;
            key = self.$keyAt(itemOrIndex);
            self.$ref().child(key).once('value', function(snap) {
               self.$$updated(snap);
            });
        }
    });
});

Which can be called via:

var comments = new RevertFactory(ref.child('comments'));

# variable comment is for example an ng-repeat that's being edited
comments.reset(comment);

AngularFire equivalent to $setPristine?

1 Answers