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

In AngularJS, how do I automatically update a value fetched via ajax?

本文关键字：ajax 获取 更新 何自动 AngularJS      更新时间：2023-09-26

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

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

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

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

然而，问题是，在这种情况下，$scope.favColor将被分配一个promise，而真正将其更改为ajax返回的值的唯一方法是在promise上设置一个.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设置RESTapi，所以请不要建议它。

$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;
    }
  }
});
相关文章：