angular.js कारखाने में $ http का उपयोग कर

Question

मेरे ऐप में मैं angular.js और jquery ui autocomplete का उपयोग कर रहा हूं। मुझे एक ही समस्या थी जिस पर चर्चा की गई है 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); 
     }); 
    } 
} 

}]);