Undo Redo In Angular Js

I have a big object lined in $rootScope (say > 100 objects and each having hierarchy of objects/array again), I want to $watch entire $rootScope with deepWatching(i.e. turning 3

Solution 1:

Undo/redo is based on the command pattern. And yes, there will be a lot of watches; such a rich functionality does not come cheap.

Just for the fun of it, here is a simple (but quite usable and extensible) implementation: http://jsfiddle.net/sYc4e/1/

A command is an interface for objects that know how to apply and rollback a change:

functionXxxCommand() {
    // implementation specific
}
Command.prototype.execute = function() {
    // implementation specific
};
Command.prototype.rollback = function() {
    // implementation specific
};

Usage: You decorate the <input>s with a directive:

<input name="name" undoable ng-model="data.name" />

And wrap them with an element (e.g. the <form>) with the undo-support directive:

<form undo-support>

The link function of undoable listens for a change in the <input> and registers a command with the undoableSupport. The controller of undoableSupport keeps track of the command list.

Solution 2:

There's also an undo/redo library called Angular-Chronicle. For myself at least, it was a better option than angular-history.

Solution 3:

The library angular-history provides undo/redo.

Currently not maintained. Most recent fork seems to be https://github.com/domoritz/angular-history.

Solution 4:

instead of watching the whole $rootScope or for that matter any one object that contains a lot of items which in turn contain a lot of items requiring you to iterate through that nested array on every digest, I would use an array(using it as a queue) of changes that are applied to the original data model and a variable that points to a current location in that queue.

I would put that array and that variable in a service and then change that index whenever undo/redo happens. You can watch that variable from everywhere that you need to respond to these changes, like directives

Solution 5:

I think the LazyJsonUndoRedo is what you're looking for.

https://github.com/azazdeaz/LazyJsonUndoRedo

From the readme:

A 'drop in' history handler with automatic undo/redo functionality for nested javascript objects, using ES6 Object.observe() or Polymer shim.

http://dailyjs.com/2014/07/18/lazy-json-undo/