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將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