sử dụng $ http trong nhà máy angular.js

Question

Trong ứng dụng của tôi, tôi đang sử dụng angular.js và jquery ui tự động hoàn thành. Tôi đã có cùng một vấn đề được thảo luận HERE Câu trả lời được chấp nhận có hiệu quả đối với tôi và chính xác là những gì tôi cần cho đến hôm nay khi cần thay thế mảng giá trị tĩnh bằng cuộc gọi http ajax $. Tôi đã cố chuyển $ http làm thông số cho hàm gốc nhưng tôi nhận được "Nhà cung cấp không xác định: autoCompleteProvider < - autoComplete"

Câu hỏi của tôi là, làm cách nào để sử dụng $ http mà không cần viết lại hoặc thay đổi quá nhiều giải pháp hiện tại?

Answer 1

Bạn cần phải thêm một tham chiếu callback trong getSource() chức năng của bạn về dịch vụ của bạn:

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

Bạn cũng có thể sử dụng $http.jsonp, nếu máy chủ của bạn trả về json. Đừng quên tham số JSON_CALLBACK sau đó.

Trong bạn chỉ thị bạn cần phải thêm chức năng gọi lại chính nó:

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

Answer 2

Đây là cách bạn có thể làm điều đó:

app.factory('autoCompleteDataService', ['$http', function($http) { 
    return { 
     getSource: function() { 
      return function(request, response) { 
       $http.get(url).success(function(data) { 
        response(data); 
       }); 
      } 
     } 
    } 

}]);

Tuy nhiên, nếu bạn muốn tải toàn bộ dữ liệu đầu tiên và cho phép widget autocomplete để tìm kiếm dữ liệu trên các mặt hàng, đây là một ví dụ làm thế nào bạn có thể làm điều đó:

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

}]);