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

Question

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

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

在我的 Controller 中，我会执行以下操作:

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

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

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

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

然后在 Controller 中执行以下操作:

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

这个方法真的有用吗？

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

Answer 1

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

ng-bind(和简写 {{ }})实际上解决了 promises，所以这可能是一个更好的解决方案。我用三个不同的例子创建了一个 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;
    }
  }
});