Verwendung von $ http in angular.js Fabrik

Question

In meiner App verwende ich angular.js und jquery ui Autocomplete. Ich hatte das gleiche Problem, das diskutiert wird HERE Die akzeptierte Antwort funktioniert gut für mich und ist genau das, was ich bis heute brauchte, wenn ich das statische Array von Werten durch einen $ http Ajax Anruf ersetzen muss. Ich versuchte $ http als Parameter an die übergeordneten Funktion zu übergeben, aber ich erhalte „Unbekannten Anbieter: autoCompleteProvider < - autocomplete“

Meine Frage ist, wie kann ich $ http ohne Umschreiben oder zu viel die aktuelle Lösung zu ändern?

Answer 1

Sie benötigen einen Rückruf Referenz in Ihrer getSource() Funktion Ihres Service hinzuzufügen:

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

Sie auch $http.jsonp nutzen könnten, wenn Ihr Server json zurückgibt. Vergessen Sie nicht den Parameter JSON_CALLBACK.

In Sie Richtlinie müssen Sie die Callback-Funktion selbst hinzuzufügen:

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

Answer 2

Dies ist, wie Sie es tun können:

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

}]);

Wenn Sie jedoch die gesamten Daten zuerst herunterladen möchten, und lassen Sie die Autocomplete-Widget die Daten auf der Client-Seite zu suchen, dies ist ein Beispiel, wie Sie es tun können:

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

}]);