Undo Redo In Angular JS

Question

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 3rd parameter of $watch to TRUE).

But the problem here is, $watch returns 2 objects (i.e. one Old RootScope and Modified RootScope). Then I have to do a process of checking what attribute of object changed in $rootScope and its hierarchy to PUSH it into stack.

Do we have an easy way out to get the exact attribute changed while watching a $scope?

$scope.$watch($rootScope, function(oldObj, newObj){

   //all I want here is exactly what attribute changed, NOT entire objects!

}, true);

Alternatively, I could add watch on each attribute of the Object but it appears to be extremely expensive.

What is the best way to achieve undo/redo in angular js?

Note :-

1. angular-history doesnt suit my need because I want to watch all attributes of object, which may also contain other objects and array.

2. I'm certain watching entire $rootScope is not a good idea either, but I have aimed to build an UI which has several grids, drag n drop, might contain form, elements can be deleted. So I want to build an overall solution to stack the changes and undo it on CTRL + Z. Imagine replicating desktop version of Photoshop.

Answer 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:

function XxxCommand() {
    // 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.

Answer 2

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