Question

我在将具有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
            });
        }
    };
});

我将callback(data);替换为return data;而没有结果......

感谢任何帮助..

编辑：添加不带http的工作代码

如果我保留此代码而不是上面的代码

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

}]）;

Answer 1

另一种回答问题的方法，在服务器端使用完整的过滤逻辑..

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

    };
 });

Answer 2

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

指令：

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

Angular中的LInking服务和指令出错

2 个答案: