I have an object that I'm sending over to a web server to store in the db. Between when I send it and when the operation completes I need to modify it slightly so the server can handle it.
In effect I have the following code:
$scope.o = {...};
$scope.send = function()
{
$scope.sanitize($scope.o);
SomeService.Save($scope.o).then( function() {
$scope.unsanitize($scope.o);
});
}
Sanitize just gets the object ready to send the server and unsanitize puts it back into a form that the view can handle more easily.
The issue I'm having is that between the call to sanitize and unsanitize, there's a few milliseconds of delay (or seconds, depending on how slow my network is at the time). During that time the view is updated and shows the changes that sanitize made. I don't want those changes showing up to the user while the server is doing its thing, though.
Is there a way of temporarily preventing angular from updating changes to a specific object?
I've created a jsfiddle that illustrates the problem here: http://jsfiddle.net/29ze4exp/5/
Sure! Just don't modify the object that is bound to the view. Instead, use a copy.
var copy = angular.copy($scope.o);
$scope.sanitize(copy);
SomeService.Save(copy).then(function() {