angular.js에서 $ http를 사용하는 공장

Question

내 앱에서는 angular.js 및 jquery UI 자동 완성을 사용하고 있습니다. 나는 동일한 문제를 논의했다 HERE 거기에 받아 들여지는 대답은 나를 위해 아주 효과적이며, $ http ajax 호출로 값의 정적 배열을 대체해야 할 때까지 지금까지 필요했던 것입니다. 나는 부모 함수에 매개 변수로 $ HTTP를 전달하려하지만 난 얻을 "알 수없는 제공자를 : autoCompleteProvider <은 - 자동 완성"

내 질문은, 어떻게 재 작성 또는 너무 많은 현재의 솔루션을 변경하지 않고 $ HTTP를 사용할 수 있습니까?

Answer 1

당신은 서비스의 당신의 getSource와() 함수에서 콜백 참조를 추가해야합니다 : 서버가 JSON을 반환하는 경우 또한, $http.jsonp를 사용할 수

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

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

]]);