撤消和重做在角JS [英] Undo Redo In Angular JS

问题描述

我有（对象/重新排列，每一个具有层次结构的发言权> 100个对象和）在$ rootScope内衬一个大目标，我想$腕表采用deepWatching整个$ rootScope（即的$转向第三个参数手表TRUE）。

但这里的问题是，$手表返回两个对象（即一老RootScope和修改RootScope）。然后，我要做的检查在$ rootScope和层次结构什么对象的属性改为其推入堆栈的过程。

我们有一个简单的办法得到确切的属性改变，而看$范围？

  $范围。$腕表（$ rootScope，功能（oldObj，newObj）{   //所有我想在这里到底是什么属性改变，而不是整个对象！}，真正的）;
 

另外，我可以对对象的每个属性添加的手表，但它似乎是极其昂贵的。

什么是实现撤销/重做角JS的最佳方式？

注意 -

1. 角历史犯规适合我的需要，因为我要看对象的所有属性，其中还含有其他对象和数组。




2. 我敢肯定看整个$ rootScope是不是一个好主意要么，但我的目的是建立有哪几种网格，拖动ñ下降的UI，可能包含形式，元素可以被删除。所以，我想建立一个全面的解决方案堆栈的变化，撤消它CTRL + Z试想复制的Photoshop桌面版本。

解决方案

撤销/重做是基于命令格式 。是的，会有很多的手表;如此丰富的功能，并不便宜。

只是为了它的乐趣，这里是一个简单的（但很实用，可扩展）实现： http://jsfiddle.net/ sYc4e / 1 /

一个命令是知道如何申请，并回滚变更对象的接口：

 函数XxxCommand（）{
    //具体实施
}
Command.prototype.execute =功能（）{
    //具体实施
};
Command.prototype.rollback =功能（）{
    //具体实施
};
 

用法：你装饰＆LT;输入＆GT; s的一个指令：

 ＆LT;输入名称=名字吴可撤销的模式=data.name/＆GT;
 

和与元素包装它们（如＆LT;形式＆GT; ）的撤消支持指令：

 ＆LT;形式撤销的载体＆gt;
 

的链接功能撤销监听中的更改＆LT;输入＆GT; 并与注册的命令 undoableSupport 。 undoableSupport 的控制器跟踪命令列表中。

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.

解决方案

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.

这篇关于撤消和重做在角JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！