角度可编辑字段在更改后恢复为原始名称

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; 
      }); 

     }; 
});