Angularjs autocomplete from $http

Question

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 request

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

Directive

app.directive('autoComplete', function($timeout) {     return function(scope, iElement, iAttrs) {             iElement.autocomplete({                 source: scope[iAttrs.uiItems],                 select: function() {                     $timeout(function() {                       iElement.trigger('input');                     }, 0);                 }             });         };     }); 

View

<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?

Answer 1

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 $qservice/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.