在 angular.js 工厂中使用 $http答案

【问题标题】：using $http in angular.js factory在 angular.js 工厂中使用 $http
【发布时间】：2012-12-26 20:04:28
【问题描述】：

在我的应用程序中，我使用 angular.js 和 jquery ui 自动完成功能。我遇到了同样的问题 HERE 那里接受的答案对我很有用，直到今天我需要用 $http ajax 调用替换静态值数组时，这正是我所需要的。我试图将 $http 作为参数传递给父函数，但我得到“Unknown provider: autoCompleteProvider

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

【问题讨论】：

标签： angularjs

【解决方案1】：

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

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

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

在你的指令中你需要添加回调函数本身：

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

【讨论】：

做到了，现在我得到“TypeError：this.source is not a function”
你能不能设置一个例子，因为我不知道你是如何使用 $hhtp 服务的
很抱歉我有一个错字，我已修复它，现在没有错误，但也没有数据返回。我使用 $http 服务，就像你上面的答案一样。
是的，当然我已经将 url 替换为我的 web 服务 url，我可以在 firebug 中看到服务正在成功返回数据，但是自动完成功能不起作用并且没有 js 错误
asgoth - 你的答案是正确的。问题是我的数据是对象数组：[{city_id:x, city_name:y}]，将其更改为：[{key:x, value:y}] 问题解决了，多么奇怪！

【解决方案2】：

你可以这样做：

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

}]);

但是，如果您想先下载整个数据并允许自动完成小部件在客户端搜索数据，这是一个示例：

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

}]);

【讨论】：