utilizzando $ http nella fabbrica angular.js

Question

Nella mia app sto usando angular.js e jquery ui completamento automatico. Ho avuto lo stesso problema discusso HERE La risposta accettata funziona perfettamente per me ed è esattamente ciò di cui avevo bisogno fino a oggi, quando ho bisogno di sostituire la matrice statica di valori con una chiamata $ http ajax. Ho cercato di passare $ HTTP come parametro della funzione genitore ma ottengo "fornitore sconosciuta: autoCompleteProvider < - Completamento automatico"

La mia domanda è, come posso utilizzare $ http senza riscrivere o modificare troppo la soluzione attuale?

Answer 1

è necessario aggiungere un riferimento richiamata nella funzione getSource() del vostro servizio:

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

Si potrebbe anche usare $http.jsonp, se il server restituisce JSON. Non dimenticare quindi il parametro JSON_CALLBACK.

In te direttiva è necessario aggiungere la funzione di callback per sé:

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

Answer 2

Ecco come si può fare:

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

}]);

Tuttavia, se si desidera scaricare tutti i dati prima e permettere al widget di completamento automatico per la ricerca dei dati sul lato client, questo è un esempio di come si può fare:

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

}]);