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-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之类的东西。快速谷歌搜索显示How to auto save with angular and debounce，这也可以防止您必须为每个输入添加ng-blur和ng-change。对于快速编辑多个输入的用户来说应该更有效率。

问题＃2

听起来像$ scope。$ apply（）或$ scope。$ digest（）在资源之后被调用。$ save（）但不确定原因。

使用angular $ resource自动保存

1 个答案: