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>

调节器

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

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

Plunker