在angular.js工厂中使用$ http

Question

在我的应用程序中，我使用angular.js和jquery ui自动完成。我遇到了同样的问题 HERE 那里接受的答案对我很好，正是我需要的直到今天，当我需要用$ http ajax调用替换静态数组值。 我试图通过HTTP $作为参数传递给父功能，但我得到“未知提供商：autoCompleteProvider < - 自动完成”

我的问题是，我怎么能使用$ HTTP而无需重写或者改变太多当前的解决方案？

Answer 1

您需要在您服务您的getSource（）函数中添加一个回调引用：

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

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

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

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

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

}]）;