在angular.js工厂中使用$ http

In my app I am using angular.js and jquery ui autocomplete. I had the same problem that is discussed HERE The accepted answer there works great for me and is exactly what I needed up until today when I need to replace the static array of values with an $http ajax call. I tried to pass $http as parameter to the parent function but I get "Unknown provider: autoCompleteProvider <- autoComplete"

在我的应用程序中,我使用angular.js和jquery ui自动完成。我遇到了与此处讨论的相同的问题。对我来说,接受的答案很有用,而且直到今天我需要用$ http ajax调用替换静态数组值。我试图将$ http作为参数传递给父函数,但我得到“未知提供者:autoCompleteProvider < - autoComplete”

My question is, how can I use $http without rewriting or changing too much the current solution?

我的问题是,如何在不重写或更改当前解决方案的情况下使用$ http?

2 个解决方案

#1

You need to add a callback reference in your getSource() function of your service:

您需要在服务的getSource()函数中添加回调引用:

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

You could also use $http.jsonp, if your server returns json. Don't forget the JSON_CALLBACK parameter then.

如果您的服务器返回json,您也可以使用$ http.jsonp。不要忘记JSON_CALLBACK参数。

In you directive you need to add the callback function itself:

在您的指令中,您需要添加回调函数本身:

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

#2

This is how you can do it:

这是你如何做到的:

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

}]);

However, if you want to download the entire data first and allow the autocomplete widget to search the data on the client side, this is an example how you can do it:

但是,如果要先下载整个数据并允许自动完成小部件在客户端搜索数据,这是一个如何执行此操作的示例:

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

}]);