在Angular JS中覆盖$ digest和$ watch

时间:2013-11-11 13:31:34

标签: javascript performance angularjs user-interface angular-ui

任何人都可以建议我如何创建一个服务来过度角度js默认$ watch和$ digest循环?

我的要求是$使用监听器监视范围对象,监听器函数应该有4个参数,@ param1 - newObject,@ param2 - oldObject,@ param3 - 改变的Exact属性,@ param4 - 属性的层次结构在该对象中,该属性发生了变化。

要求: -

$scope.$watch('objectName', function(param1,param2,param3,param4){
   //log param3 and param4 in a stack for later use. 
   //Note:- I dont want to log entire changed object since its too big.
}, true);

注意: - 现在我们可以深入观察一个对象,但是监听器会为我们提供2个对象,旧对象和新对象。我想要的只是改变确切的属性。

任何帮助都将受到高度赞赏。请参阅以下链接以了解我的完整问题。

Undo Redo In Angular JS

1 个答案:

答案 0 :(得分:0)

我认为您可以创建一个撤销系统,该系统使用某种分类系统进行各种类型的撤消以及更多面向事件的方法。我专注于你为每次击键迭代整个对象所做的评论,所以将从那里开始

我假设您没有为输入上的每次击键更新服务器,在这种情况下,当它处于焦点时,您不需要观察除特定输入的键事件之外的任何其他内容。将CTRL + Z绑定到文档时,请以输入处于焦点时不会发生全局的方式执行此操作。

以下方案基于最简单的UI操作,仅跟踪...更新字段。

在输入焦点时,您将立即获取其当前模型值的副本,并将其存储为值,以便稍后完全撤消ng模型。

在聚焦时,CTRL + Z将绑定到该输入,并且击键事件可以在非常本地级别撤消,而不会影响在更高级别观看的任何需要。在模糊时取消绑定该输入的关键事件。

在输入模糊时,您就可以$emit update event跟踪您要跟踪的类别,如“字段更新”。将旧的存储值(包含ng-model和更新类别的对象)发送到侦听更新并将更新推送到撤消数组的跟踪服务。

当用户现在点击撤消时,服务会查看更新类型并更改与存储的字段名称关联的对象的值,并从队列中删除最后存储的项目

我只使用jQuery创建了一个类似于此的UI,该UI设置为创建和管理具有绝对定位元素的网页布局,以及插入和更新内容。

我只是在用户级输入上开始,假设没有创建或删除新的数据对象。那些可能由$ .watch观察数组长度来处理。通过只观察长度,你不必迭代每个包含的对象的每个属性来找出变化的内容。

所有这一切的一个有用的跟踪属性是$$hashKey属性,该角度为其在所有范围内触摸的每个对象提供。使用haskey可以帮助映射数组长度更改以查找差异。我还没有完成这一部分的所有内容。

希望事件驱动的输入跟踪概念有所帮助。至少在用户输入级别,它会使用$ watch

来减少大量的开销

最近还添加了一个更浅的侦听器$watchCollection。尚未使用它,但肯定会减少开销,因为它的用例可能无法保证完整的手表