Angularjs 链接中的服务和指令时出错

我在将具有http的服务链接到指令时遇到了一个问题。这是那个的密码

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

myapp.directive('autoComplete', function(autoCompleteDataService) {
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
            elem.autocomplete({
                source: autoCompleteDataService.getSource(), 
                select: function( event, ui ) {
                         scope.$apply(function() {
                           scope.item.unit_id = ui.item.value; 
                         });
                        },
                minLength: 2
            });
        }
    };
});

我替换了

回调（数据）带有
返回数据没有结果

谢谢你的帮助

编辑：添加了没有http的工作代码

如果我保留这个代码，而不是上面的代码，它就可以工作了

myapp.factory('autoCompleteDataService', [function() {
return {
    getSource: function() {
        return ['apples', 'oranges', 'bananas'];
    }
}

}]))

指令：

link : function(scope, elem, attr, ctrl) {
    autoCompleteDataService.getSource().success(function(data) {
        elem.autocomplete({
            source: data, 
            select: function( event, ui ) {
                scope.$apply(function() { scope.item.unit_id = ui.item.value; });
            },
            change: function (event, ui) {
                if (ui.item === null) {
                    scope.$apply(function() { scope.foo = null });
                }
            },
            minLength: 2
        });
    });
}

指令：

link : function(scope, elem, attr, ctrl) {
    autoCompleteDataService.getSource().success(function(data) {
        elem.autocomplete({
            source: data, 
            select: function( event, ui ) {
                scope.$apply(function() { scope.item.unit_id = ui.item.value; });
            },
            change: function (event, ui) {
                if (ui.item === null) {
                    scope.$apply(function() { scope.foo = null });
                }
            },
            minLength: 2
        });
    });
}

解决此问题的另一种方法是在服务器端使用完整的筛选逻辑

    myapp.directive('autoComplete', function(autoCompleteDataService) {
    return {
        restrict: 'A',

        link: function(scope, elem, attr, ctrl) {

            elem.autocomplete({

                source: function( request, response ) {
                            $.ajax({
                              url: "./get_data_from_server.php",
                              dataType: "json",
                              data: {
                                maxRows: 10,
                                startsWith: request.term
                              },
                              success: function( data ) {
                                  response(data);
                              }
                            });
                          },

                select: function( event, ui ) {
            scope.$apply(function() { scope.item.unit_id = ui.item.value; });
                },

                minLength: 2
            });
        }

    };
 });

解决此问题的另一种方法是在服务器端使用完整的筛选逻辑

    myapp.directive('autoComplete', function(autoCompleteDataService) {
    return {
        restrict: 'A',

        link: function(scope, elem, attr, ctrl) {

            elem.autocomplete({

                source: function( request, response ) {
                            $.ajax({
                              url: "./get_data_from_server.php",
                              dataType: "json",
                              data: {
                                maxRows: 10,
                                startsWith: request.term
                              },
                              success: function( data ) {
                                  response(data);
                              }
                            });
                          },

                select: function( event, ui ) {
            scope.$apply(function() { scope.item.unit_id = ui.item.value; });
                },

                minLength: 2
            });
        }

    };
 });

您在元素上的自动完成功能是由插件或其他东西完成的？@Thomas由标准jui完成。。您在元素上的自动完成功能是由插件或其他东西完成的？@Thomas由标准jui完成。。抱歉，它不起作用。。。SyntaxError:Object.parse（native）at qb（）at Zc.d.defaults.transformResponse（）at Array.forEach（native）at m（）at Sb（）at c（）at h（）我提供了一个完全不同的解决方案。看一看我编辑的答案。谢谢你的帮助，但同样的错误。我无法判断这个错误的根本原因在哪里，在指令或@service中。从echo“['apples'，'oranges'，'bananas']”更改了服务器php reply的输出；回显（json_编码（数组（'apple'，'ornage'，'Banana'））；现在，上一个语法错误问题已经解决，并且加载时没有错误。在输入框中键入时，我从jqueryui脚本中得到错误，因为未捕获类型错误：对象[object object]的属性“source”不是函数jquery-ui-1.10.3.js:6214$.widget.\u search jquery-ui-1.10.3.js:6214（匿名函数）jquery-ui-1.10.3.js:401$.widget.search jquery-ui-1.10.3.js:6206（匿名函数）jquery-ui-1.10.3.js:401。。。。你知道问题出在哪里吗？我接受你的答案，因为我觉得角度合适，但错误在于。。。我想…对不起，它不起作用了。。。SyntaxError:Object.parse（native）at qb（）at Zc.d.defaults.transformResponse（）at Array.forEach（native）at m（）at Sb（）at c（）at h（）我提供了一个完全不同的解决方案。看一看我编辑的答案。谢谢你的帮助，但同样的错误。我无法判断这个错误的根本原因在哪里，在指令或@service中。从echo“['apples'，'oranges'，'bananas']”更改了服务器php reply的输出；回显（json_编码（数组（'apple'，'ornage'，'Banana'））；现在，上一个语法错误问题已经解决，并且加载时没有错误。在输入框中键入时，我从jqueryui脚本中得到错误，因为未捕获类型错误：对象[object object]的属性“source”不是函数jquery-ui-1.10.3.js:6214$.widget.\u search jquery-ui-1.10.3.js:6214（匿名函数）jquery-ui-1.10.3.js:401$.widget.search jquery-ui-1.10.3.js:6206（匿名函数）jquery-ui-1.10.3.js:401。。。。你知道问题出在哪里吗？我接受你的答案，因为我觉得角度合适，但错误在于。。。我想。。