В AngularJS, как автоматически обновлять значение, полученное с помощью ajax?

Question

Я хочу сделать функцию, которая извлекает некоторую информацию из URL-адреса ajax. Например, в моей службы, я бы следующий метод:

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

И в мой контроллер, я бы сделать следующее:

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

Проблема, однако есть $scope.favColor будет назначен обещание в этом case, и единственный способ фактически изменить его на значение, возвращаемое 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, но я не могу настроить REST api для моего ajax, поэтому, пожалуйста, не предлагайте его.

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; 
    } 
    } 
});