在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（和簡寫{{}}）實際上解決了承諾，所以這可能是更好的解決方案。我用三個不同的例子創建了一個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; 
    } 
    } 
});