I'm trying to write an autocomplete directive that fetches data from the server using an $http request (without using any external plugins or scripts). Currently it works only with static data. Now, I know that I need to insert my $http request into the source:
of the directive, but I can't find any good documentation on the subject.
$http.post($scope.url, { "command": "list category() names"}).
success(function(data, status) {
$scope.status = status;
$scope.names = data;
})
.
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
app.directive('autoComplete', function($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
iElement.trigger('input');
}, 0);
}
});
};
});
<input auto-complete ui-items="names" ng-init="manualcat='no category entered'" ng-model="manualcat">
So, how do I piece this all together correctly the Angular way?
I made an autocomplete directive and uploaded it to GitHub. It should also be able to handle data from an HTTP-Request.
Here's the demo: http://justgoscha.github.io/allmighty-autocomplete/ And here the documentation and repository: https://github.com/JustGoscha/allmighty-autocomplete
So basically you have to return a promise
when you want to get data from an HTTP request, that gets resolved when the data is loaded. Therefore you have to inject the $q
service/directive/controller where you issue your HTTP Request.
Example:
function getMyHttpData(){
var deferred = $q.defer();
$http.jsonp(request).success(function(data){
// the promise gets resolved with the data from HTTP
deferred.resolve(data);
});
// return the promise
return deferred.promise;
}
I hope this helps.