javascript - angular js 在 watch 语句中恢复范围属性的更改

Question

我有一个选择框，当它发生变化时会触发一个 http PUT。

html:

<select ng-model='color'></select>

js:

$scope.$watch('color', function(newValue, oldValue) { 
    $http.put('...', {color: newValue})   
});

问题是，如果 http 请求因任何原因失败，我希望选择框恢复到它以前的值。

 $scope.$watch('color', function(newValue, oldValue) { 
    req = $http.put('...', {color: newValue})
    req.error(function(){
      $scope.color = oldValue  // will probably cause the $watch to get triggered again (bad)
    });   
});

这可能会导致再次触发 $watch 函数，这是不可取的，因为它会触发不必要的 PUT。

如何在不再次触发 $watch 函数的情况下恢复值？

Answer 1

使用 ng-change 将更改提交到服务器，如果放置失败则恢复为之前的值。

HTML

<select ng-model='color' ng-change="changeColor()"></select>

Controller

 $scope.$watch('color', function(newValue, oldValue) { 
      $scope.previousColor = oldValue;
 });

 $scope.changeColor = function(){
    $http.put('...', {color:  $scope.color}).error(function(){
      $scope.color =  $scope.previousColor;
    });   
 };

Plunker