Question

我想创建一个从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设置REST api，所以请不要建议。

Answer 1

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

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

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

1 个答案: