角度资源 - 如何检查资源实例是否有任何未保存的更改?

时间:2013-10-27 06:36:24

标签: javascript angularjs angularjs-service angularjs-resource

我希望能够判断用户是否修改了$ resource实例 - 也就是说,当前状态是否与最初从服务器加载的状态不同&&还没有被保存。我怎样才能做到这一点?

3 个答案:

答案 0 :(得分:14)

假设您获得了一个资源,然后将其放在当前的$ scope上,以便用户可以编辑它:

$scope.question = Questions.get({id:"19615328"});

然后您可以观看此类更改:

// some flag, name it anything
$scope.userChange = false;
$scope.$watch('question', function(newValue, oldValue) {
    if(newValue && newValue != oldValue){
        $scope.userChange = true;
        // if you want to you can even do this, this will trigger on every change though
        $scope.question.$save();
    }
}, true);

以下所有内容都是下面聊天中额外问题的结果

然后,只要您想检查它是否已被更改$scope.userChange就可以告诉您是否发生了更改。保存对象时,请重置$scope.userChange

你甚至可以这样做

$scope.$watch('question', function() {
    $scope.question.$save();
}, true);

显然你想添加某种节流或“去抖”系统,所以等待一秒左右,一旦你有了这个,对对象的任何改变都会导致通过$scope.$watch进行保存。 / p>

如果你想检查null,当你还没有收到实际的对象时。

$scope.$watch('question', function(newValue, oldValue) {
    // dont save if question was removed, or just loaded
    if(newValue != null && oldValue != null){
        $scope.question.$save();
    }
}, true);

您甚至可以打包Questions.get来电,请参阅this questions for answers on how you can do this on the service & factory level,以执行此类操作。

Questions.getAndAutosave = function(options){
    var instance = Questions.get(options);
    $scope.$watch(function(){
            return instance;
        },
        function(newValue, oldValue){
            if (newValue === oldValue) return;
            if(newValue != null && oldValue != null){
                instance.$save();
            }
        }, true);
    return instance;
};

然后,无论何时拨打Questions.getAndAutosave,它返回的内容都已被监听,并且会自动显示$save'd。我们执行if (newValue === oldValue) return;的原因是因为$watch在您调用它时会立即触发,然后会监视更改。我们不需要保存第一个电话。

答案 1 :(得分:1)

我找到了一个解决方案,它既不会将服务器上的数据作为用户更改来处理,而是直接在服务本身中实现。它可能不是最有效的解决方案,但提供了我想要的功能,

app.factory('testService', ['$resource', '$rootScope', function($resource, $rootScope){
var test = $resource('/api/words/:id', {id: '@id'});

test.orig_get = test.get;

test.get = function(options){
    var instance = test.orig_get(options, function(){
        instance.unsaved = false;
        $rootScope.$watch(function(){
            return instance;
        }, function(newValue, oldValue) {
           if(angular.equals(newValue, oldValue)){
                return;
           }
           var changed_indexes = [];
           for(var i in newValue){
                if(!angular.equals(newValue[i], oldValue[i])){
                    changed_indexes.push(i);
                }
           }
           if(newValue != null && oldValue != null && !(changed_indexes.length==1 && changed_indexes[0]=='unsaved')){
                console.log('detected change. setting unsaved to true');
                instance.unsaved = true;
            }

        }, true);
    });
    return instance;
}

test.prototype.orig_save = test.prototype.$save;

test.prototype.$save = function(options){
    return this.orig_save(options, function(){
        this.unsaved = false;           
    })
}

return test;
}]);

答案 2 :(得分:0)

您可以克隆初始对象,然后在需要检查时进行比较。

master = null
resource = Resource.get({id:1}, function() {
  master = angular.copy(resource)
})
function isModified() {
  return !angular.equals(resource, master)
}