在我的应用程序中,我使用 angular.js 和 jquery ui 自动完成功能。我遇到了在这里讨论的相同问题 那里接受的答案对我很有用,直到今天我需要用 $http ajax 调用替换静态值数组时,这正是我所需要的。我试图将 $http 作为参数传递给父函数,但我得到“未知提供者:autoCompleteProvider <- autoComplete”
我的问题是,如何在不重写或更改当前解决方案的情况下使用 $http ?
您需要在服务的 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
});
});
您可以这样做:
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);
});
}
}
}]);