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

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 周期内不断设置为 promise 的已解析值 - 覆盖您的编辑。

所以不要像这样将你的变量绑定到承诺：

$scope.myUser = getUser();

使用promise 的then 方法并分配promise 的结果。这样myUser 只被初始化为你的承诺的结果一次，而不是永久地绑定到承诺本身。

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

Answer 2

对于此示例，您实际上并不需要明确的promise。 $http 已经返回了一个承诺，所以你真的不需要定义一个新的。

我重新安排了代码。为了初始化值，我使用ng-init 来调用getUser() 方法。然后调用$http 并绑定到$scope.myUser。顺便说一句，我注意到只输入error 回调。

因为 promise 是异步的，所以必须绑定到 success 或 error 回调函数内的 $scope $http。

它恢复到“旧”值的原因是因为您直接绑定到函数getUser()。这意味着 Angular 在此函数的返回值上设置了 $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;
            });

        };
});