在 AngularJS 中，如何自动更新通过 ajax 获取的值？

Question

我想做一个从 ajax URL 获取一些信息的函数。例如，在我的服务中，我会有以下方法：

this.getFavColor = function(id)
{
    return $http.get('/colors/get/' + id);
}

在我的控制器中，我会执行以下操作：

$scope.favColor = UserService.getFavColor( id );

但问题是，$scope.favColor 在这种情况下将被分配一个承诺，而将其实际更改为 ajax 返回的值的唯一方法是在承诺上设置一个.success() 回调并将其用于更新值。

但是，如果我有很多必须通过 ajax 获取的东西，这很快就会变得很麻烦。有没有捷径，比如可以这样做？

this.getFavColor = function(id, variableToChange)
{
    return $http.get('/colors/get/' + id).success(function(jsonResult)
       {
         variableToChange = jsonResult.favColor;
       });
}

然后在控制器中执行以下操作：

UserService.getFavColor( id, $scope.favColor );

这种方法真的有效吗？

注意：我已经考虑过$resource，但我无法为我的 ajax 设置 REST api，所以请不要建议。

Answer 1

$resource 这样做的方式是立即返回一个空对象，然后在响应从服务器到达时将数据添加到该对象。这就是为什么 $resource 只能返回对象或数组，而不能返回原语的原因。

ng-bind（和简写 {{ }}）实际上解决了 Promise，所以这可能是一个更好的解决方案。我用三个不同的例子创建了一个 plnkr：http://plnkr.co/edit/WOrU5eMOmsgK4wuiSCHu?p=preview

// data.json: {"color":"Blue"}

app.service('UserService',function($http, $q){
  return {

    // return value can be accessed by {{value.data.color}}
    getFavColor: function(id){
      return $http.get('data.json');
    },

    // return value can be accessed by {{value}}
    getFavColorWithQ: function(id){
      var def = $q.defer();
      $http.get('data.json').success(function(data){
        def.resolve(data.color);
      });
      return def.promise;
    }

    // return value can be accessed by {{value.color}}
    ,resourceExample: function(id){
      var response = {};
      $http.get('data.json').success(function(data){
        response.color = data.color;
      });
      return response;
    }
  }
});