使用angular $ resource自动保存

Question

我正在尝试为具有许多具有自动保存功能的字段的模型实现编辑器.

该模型是json,它加载了$ resource并直接在范围中使用.

 MyModelResource = $resource(config.api4resource + 'models/:id', {id:'@_id'});
 $scope.myModel = MyModelResource.get({id: xxxx});

问题#1: 实际的自动保存实现.对于我正在做的每个文本字段:

HTML:

<input type="text" ng-model="myModel.someField" ng-blur="save()" ng-change="dirty()">

控制器:

$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),并手动跟踪两者之间的变化？这听起来不像一个有角度的方式,必须有一个更好的解决方案.

谢谢!

Answer 1

问题#1

我会使用Lo-Dash debounce之类的东西。快速谷歌搜索显示如何使用角度和去抖动自动保存，这也可以防止您必须向每个输入添加 ng-blur 和 ng-change 。对于快速编辑多个输入的用户来说应该更有效。

问题#2

听起来像 $scope.$apply() 或 $scope.$digest() 在 resources.$save() 之后被调用，但不确定为什么。