angular.jsファクトリで$ httpを使用して

Question

私のアプリでは、angular.jsとjquery uiのオートコンプリートを使用しています。私は議論されている同じ問題を抱えていました HERE 私にはうってつけの答えがあり、静的な値の配列を$ http ajax呼び出しで置き換える必要がある今日まで、私は本当に必要でした。 は私が親関数へのパラメータとして$ HTTPを渡そうとしましたが、私は得る「不明なプロバイダを：autoCompleteProvider < - オートコンプリート」

を私の質問は、私は、現在のソリューションを書き換えるか、あまり変えずに$ HTTPを使用する方法、ありますか？

Answer 1

あなたはあなたのサービスのあなたのgetSource（）関数にコールバックの参照を追加する必要があります。

app.factory('autoCompleteDataService', ['$http', function($http) { 
    return { 
     getSource: function(callback) { 
      var url = '...'; 
      $http.get(url).success(function(data) { 
      callback(data); 
      } 
     } 
    } 
}]); 

サーバーがJSONを返す場合にも、$http.jsonpを使用することができます。 JSON_CALLBACKパラメータを忘れないでください。

はあなたがコールバック関数自体を追加する必要がありディレクティブで：

... 
autoCompleteDataService.getSource(function(data) { 
    elem.autocomplete({ 
     source: data 
     minLength: 2 
    });  
}); 

Answer 2

これは、あなたがそれを行うことができる方法である。

app.factory('autoCompleteDataService', ['$http', function($http) { 
    return { 
     getSource: function() { 
      return function(request, response) { 
       $http.get(url).success(function(data) { 
        response(data); 
       }); 
      } 
     } 
    } 

}]）;

あなたが最初に全体のデータをダウンロードして、オートコンプリートウィジェットは、クライアント側のデータを検索できるようにしたい場合は、これはあなたがそれを行うことができる方法の例です：

app.directive('autoComplete', function(autoCompleteDataService, $http) { 
return { 
    restrict : 'A', 
    link : function(scope, elem, attr, ctrl) { 
     autoCompleteDataService.getData(function(err, data) { 
      if (err) { 
       console.log("Could not retrieve data."); 
       return; 
      } 

      elem.autocomplete({ 
       minLength: 0, 
       source: data, 
       focus: function(event, ui) { 
        elem.val(ui.item.label); 
        return false; 
       }, 
       select: function(event, ui) { 
        elem.val(ui.item.label); 
        return false; 
       } 
      }) 
      .data("ui-autocomplete")._renderItem = function(ul, item) { 
       return $("<li>") 
       .append("<a>" + item.label + "</a>") 
       .appendTo(ul); 
      }; 
     }); 
    } 
}; 

}）;

app.factory('autoCompleteDataService', ['$http', '$rootScope', function($http, $scope) { 
return { 
    getData: function(callback) { 
     if ($scope.data) { 
      return callback(null, $scope.data); 
     } 

     $http.get('URL') 
     .success(function(data) { 
      $scope.data = data; 
      return callback(null, data); 
     }) 
     .error(function(data) { 
      return callback(true, null); 
     }); 
    } 
} 

}]）;