Undo repeat in Angular JS

Question

I have a large object laid out in $ rootScope (say> 100 objects, and each of them has a hierarchy of objects / array again), I want $ to watch the entire $ rootScope using deepWatching (i.e. turn the third parameter of $ watch in TRUE).

But the problem is this: $ watch returns 2 objects (i.e., one old RootScope and a modified RootScope). Then I have to go through the process of checking which attribute of the object has been changed in $ rootScope and its hierarchy to push it onto the stack.

Do we have an easy way to get the exact attribute changed when viewing $ scope?

$scope.$watch($rootScope, function(oldObj, newObj){ //all I want here is exactly what attribute changed, NOT entire objects! }, true); 

Alternatively, I could add a clock for each attribute of the Object, but it seems extremely expensive.

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

Note : -

• angular -History is not suitable for my need, because I want to see all the attributes of an object, which may also contain other objects and an array.

• I am sure that looking at just $ rootScope is not a good idea either, but I am aiming at creating a user interface that has several grids, drag n drop, can contain a form, elements can be removed. So I want to create a general solution for folding changes and roll it back to CTRL + Z. Imagine replicating the desktop version of Photoshop.

Answer 1

Undo / redo based on the template. And yes, there will be many hours; such rich functionality is not cheap.

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

A command is an interface for objects that know how to apply and roll back changes:

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

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

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

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

 <form undo-support> 

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

Answer 2

There is also an undo / redo library called Angular-Chronicle . For me, at least it was a better option than the angular story.

Answer 3

The angular-history library provides undo / redo.

Not currently supported. The latest version seems to be https://github.com/domoritz/angular-history .

Answer 4

instead of looking at all $ rootScope or, for that matter, any one object that contains many elements, which in turn contain many elements, requiring you to iterate over this nested array in each digest, I would use an array ( using this as a queue) of changes that apply to the original data model, and a variable that indicates the current location in this queue.

I would put this array and this variable in the service, and then change this index when undo / redo occurs. You can view this variable wherever you need to respond to these changes, such as directives

Answer 5

I think LazyJsonUndoRedo is what you are looking for.

https://github.com/azazdeaz/LazyJsonUndoRedo

From the readme file:

A 'drop' in the story handler with an automatic undo / redo function for nested JavaScript objects using ES6 Object.observe () or Polymer padding.

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