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将更改提交到服务器，如果put失败，则还原为之前的值。

HTML

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

控制器

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

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

Plunker