6

我在 $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);

或者，我可以在 Object 的每个属性上添加 watch，但它似乎非常昂贵。

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

注意：-

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

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

4

5 回答 5

5

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

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

命令是知道如何应用和回滚更改的对象的接口：

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

用法：你<input>用一个指令装饰 s：

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

并用带有指令的元素（例如<form>）包装它们：undo-support

<form undo-support>

的链接功能undoable侦听 中的更改<input>并将命令注册到undoableSupport. 控制器undoableSupport跟踪命令列表。

于 2013-11-11T15:30:06.430 回答
4

还有一个名为Angular-Chronicle的撤销/重做库。至少对我自己来说，这是一个比角度历史更好的选择。

于 2014-08-20T19:10:13.063 回答
2

库angular-history提供撤消/重做。

目前没有维护。最近的分叉似乎是https://github.com/domoritz/angular-history。

于 2014-02-23T14:48:44.550 回答
0

我认为 LazyJsonUndoRedo 是您正在寻找的。

https://github.com/azazdeaz/LazyJsonUndoRedo

从自述文件：

使用 ES6 Object.observe() 或 Polymer shim 的“插入式”历史处理程序，具有嵌套 javascript 对象的自动撤消/重做功能。

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

于 2014-11-28T13:33:28.820 回答
0

而不是看整个 $rootScope 或者任何一个包含很多项目的对象，而这些项目又包含很多项目，需要您在每个摘要上遍历该嵌套数组，我会使用一个数组（将它用作队列）应用到原始数据模型的更改和指向该队列中当前位置的变量。

我会将该数组和该变量放在一个服务中，然后在发生撤消/重做时更改该索引。您可以从需要响应这些更改的任何地方查看该变量，例如指令

于 2013-11-06T17:42:04.637 回答