Angularjs 在angular.js工厂中使用$http

在我的应用程序中，我使用angular.js和jquery ui autocomplete。我的问题和刚才讨论的一样 这里被接受的答案对我来说非常有用，这正是我直到今天需要用$HTTPAjax调用替换静态值数组时所需要的。

---

我试图将$http作为参数传递给父函数，但得到“未知提供程序：autoCompleteProvider您需要在服务的getSource（）函数中添加回调引用：

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

如果服务器返回json，也可以使用。不要忘记json_回调参数

在指令中，您需要添加回调函数本身：

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

}]))

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

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

---

}])

这样做了，现在我得到了“TypeError:this.source不是一个函数“既然我不知道您是如何使用$hhtp服务的，那么您可以设置一个示例吗？很抱歉，我有一个输入错误，我已经修复了它，现在没有错误，但也没有数据返回。我使用的$http服务与您上面的回答完全相同。是的，当然我已经将url替换为我的web服务url，并且我可以在firebug中看到该服务正在成功返回数据，但是自动完成不起作用，并且没有js errorasgoth-您的回答是正确的。问题是，我的数据是对象数组：[{city\u id:x，city\u name:y}]，在将其更改为：[{key:x，value:y}]之后，问题解决了，多么奇怪！