角度可編輯字段在更改後恢復爲原始名稱

Question

我試圖遠程獲取用戶的名稱，然後使其可編輯，以便可以再次保存。我正確地獲取名稱，但是當我嘗試更改名稱時，它將恢復爲舊名稱。

我是否在推遲和解決問題？

var deferred = $q.defer(); 
    $http({ 
      url : '/getuser', 
      method : 'GET', 
      }).success(function(data) { 
      deferred.resolve(data); 
      }); 
     return deferred.promise; 

http://jsfiddle.net/NfPcH/181/

Answer 1

你直接分配的承諾，你的模型變量。所以即使在很多方面你的變量的行爲就像獲得了承諾的結果，但它實際上卻包含了對承諾的約束。

因此，您的變量會在$ digest循環期間設置爲已解析的承諾值 - 覆蓋您的編輯。

所以不是你的變量綁定到這樣的承諾：

$scope.myUser = getUser(); 

使用承諾的then方法和分配承諾的結果。這種方式myUser初始化爲您的承諾的結果只是一次，而不是永久地約束到承諾本身。

getUser().then(function(result) { 
    $scope.myUser = result; 
}); 

Answer 2

在這個例子中，你並不需要明確的promise。 $http已經返回一個承諾，所以你真的不需要定義一個新的承諾。

我已經重新安排了一些代碼。爲了初始化該值，我使用ng-init來調用getUser()方法。這然後調用$http並綁定到$scope.myUser。順便說一句，我注意到，只有在進入error回調。

因爲承諾是異步的，所以您必須綁定到success或error回調函數$http內的$scope。

它恢復到「舊」值的原因是因爲您直接綁定到函數getUser()。這意味着角度設置了一個$watch這個函數的返回值。

這是working fiddle。

HTML：

<h4>remote</h4> 
<div ng-app="app" ng-controller="Ctrl" ng-init="init()"> 
    <a href="#" editable-text="myUser.name" > 
    {{ myUser.name || 'not set!' }} 
    </a> 
</div> 

JS：

app.controller('Ctrl', function($scope, $http, $q) { 
    $scope.myUser = null; 

    $scope.init = function() { 

     getUser(); 
    }; 

    function getUser() { 

      return $http({ 
       url : 'http://espn.com/images/test-data/public-profile.json', 
       method : 'GET', 
      }) 
      .error(function(data) { 
       $scope.myUser = {"name":"bobby","age":"21"}; 
      }) 
      .success(function(data) { 
       console.log(data); 
       $scope.myUser = data; 
      }); 

     }; 
});