javascript - 在 Angular JS 中撤消重做

Question

我在 $rootScope 中排列了一个大对象(比如 > 100 个对象，每个对象都有对象/数组的层次结构)，我想用 deepWatching $watch 整个 $rootScope(即将 $watch 的第三个参数设置为 TRUE)。

但这里的问题是，$watch 返回 2 个对象(即一个 Old RootScope 和 Modified RootScope)。然后我必须做一个过程来检查对象的哪些属性在 $rootScope 及其层次结构中发生了变化，以将其推送到堆栈中。

我们是否有一种简单的方法来在观察 $scope 时更改确切的属性？

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

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

}, true);

或者，我可以在对象的每个属性上添加监视，但它看起来非常昂贵。

在 angular js 中实现撤消/重做的最佳方法是什么？

注意:-

1. angular-history 不适合我的需要，因为我想查看对象的所有属性，其中可能还包含其他对象和数组。

2. 我确信观看整个 $rootScope 也不是一个好主意，但我的目标是构建一个具有多个网格、拖放、可能包含表单、可以删除元素的 UI。所以我想构建一个整体解决方案来堆叠更改并在 CTRL + Z 上撤消它。想象一下复制 Photoshop 的桌面版本。

Answer 1

撤消/重做基于command pattern .是的，会有很多 watch ；如此丰富的功能并不便宜。

只是为了好玩，这里有一个简单的(但非常有用和可扩展)实现:http://jsfiddle.net/sYc4e/1/

命令是知道如何应用和回滚更改的对象的接口(interface):

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

用法:装饰 <input>带有一个指令:

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

然后用一个带有 <form> 的元素(例如 undo-support )包裹它们指令:

<form undo-support>

undoable的链接函数监听 <input> 中的变化并使用 undoableSupport 注册一个命令. undoableSupport的 Controller 跟踪命令列表。