我正在尝试为具有许多具有自动保存功能的字段的模型实现编辑器.
该模型是json,它加载了$ resource并直接在范围中使用.
MyModelResource = $resource(config.api4resource + 'models/:id', {id:'@_id'}); $scope.myModel = MyModelResource.get({id: xxxx});
问题#1: 实际的自动保存实现.对于我正在做的每个文本字段:
HTML:
控制器:
$scope.dirty = function() { $scope.dirtyFlag = true; console.log('Marking dirty!'); }; $scope.save = function(force) { if (!$scope.dirtyFlag && !force) { return; } $scope.dirtyFlag = false; console.log('Saving!'); $scope.myModel.$save(); }
这个想法是,节省每次ng-change都太昂贵了,因为我不希望像用户类型那样为每个字母命中服务器.所以ng-change()在我的控制器中标记了一个"脏"标志,当我离开具有ng-blur的字段时,我检查标志并仅在状态为脏时保存.这仍然不包括所有情况,例如用户修改文本字段但未移动到另一个字段的情况.有一个选项可以在dirty()中为save()安排一个计时器,这样我无论如何都会保存,但这看起来不像是一个优雅的解决方案(来自https://stackoverflow.com的计时器代码)/ a/21137079/1076865):
$scope.dirty = function() { $scope.dirtyFlag = true; console.log('Marking dirty!'); if (savePromise) { $timeout.cancel(savePromise); } savePromise = $timeout(function() { savePromise = null; $scope.save(); }, 500); };
解决这个问题的常用方法有哪些?
问题2: 一旦我的保存代码被实际命中,我正在调用myModel.$ save()函数.这最终会向服务器发送POST请求,服务器将其保存在数据库中,并使用与响应相同的模型进行回复.
这就是问题,它似乎导致myModel的重新加载,导致网页的某些部分重排并且焦点丢失.因此,如果用户键入内容并按下TAB以移动到下一个字段,片刻之后(一旦回复后),焦点将从该新字段中消失.很讨厌.我该如何解决这个问题?我是否需要自己保留模型的两个副本(一个用于$ resource,另一个用于$ scope),并手动跟踪两者之间的变化?这听起来不像一个有角度的方式,必须有一个更好的解决方案.
谢谢!