jQuery स्वत: पूर्ण + AngularJS

Question

के साथ समस्याएं मैं अपने पृष्ठ पर अजगुलरजेएस का उपयोग कर रहा हूं और jqueryui से स्वत: पूर्ण का उपयोग करने के लिए एक फ़ील्ड जोड़ना चाहता हूं और स्वत: पूर्ण AJAX कॉल को सक्रिय नहीं करता है।

मैंने बिना किसी कोणीय (एनजी-एप और एनजी-कंट्रोलर) के पृष्ठ पर स्क्रिप्ट का परीक्षण किया है और यह अच्छी तरह से काम करता है, लेकिन जब मैं स्क्रिप्ट को कोणीय वाले पृष्ठ पर डालता हूं तो यह काम करना बंद कर देता है।

कोई विचार?

jQuery स्क्रिप्ट:

$(function() { 

    $('#txtProduct').autocomplete({ 
     source: function (request, response) { 

      alert(request.term); 

     }, 
     minLength: 3, 
     select: function (event, ui) { 

     } 
    }); 

}); 

• दिलचस्प ध्यान दें: जब मैं क्रोम निरीक्षक पर स्क्रिप्ट फोन स्वत: पूर्ण काम करना शुरू करता !!!
• संस्करण: AngularJS: 1.0.2 - jQueryUI: 1.9.0

निष्कर्ष:

: jQueryUI से स्वत: पूर्ण विजेट होना चाहिए उदाहरण के रूप में AngularJS के एक कस्टम निर्देश अंदर से आरंभ मार्कअप

<div ng-app="TestApp"> 
    <h2>index</h2> 
    <div ng-controller="TestCtrl"> 

     <input type="text" auto-complete>ddd</input> 

    </div> 
</div> 

कोणीय स्क्रिप्ट

<script type="text/javascript"> 

    var app = angular.module('TestApp', []); 

    function TestCtrl($scope) { } 

    app.directive('autoComplete', function() { 
     return function postLink(scope, iElement, iAttrs) { 

      $(function() { 
       $(iElement).autocomplete({ 
        source: function (req, resp) { 
         alert(req.term); 
        } 
       }); 
      }); 

     } 
    }); 

</script> 

Answer 1

शायद तुम सिर्फ एक "कोणीय रास्ता" में यह करने के लिए अपने डोम तत्वों की स्थापना के लिए एक निर्देश का उपयोग करें और घटना बाइंडिंग करते हैं, एक सेवा का उपयोग करने के लिए अपने डेटा प्राप्त करने के लिए, की आवश्यकता है ... जो है, और एक नियंत्रक का उपयोग अपने व्यापार तर्क करने के लिए ... यह सब करते हुए निर्भरता इंजेक्शन अच्छाई कि कोणीय है लाभ ...

एक सेवा अपने स्वत: पूर्ण डेटा प्राप्त करने के ...

app.factory('autoCompleteDataService', [function() { 
    return { 
     getSource: function() { 
      //this is where you'd set up your source... could be an external source, I suppose. 'something.php' 
      return ['apples', 'oranges', 'bananas']; 
     } 
    } 
}]); 

एक निर्देश करने के लिए स्वत: पूर्ण प्लगइन स्थापित करने का काम।

app.directive('autoComplete', function(autoCompleteDataService) { 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attr, ctrl) { 
        // elem is a jquery lite object if jquery is not present, 
        // but with jquery and jquery ui, it will be a full jquery object. 
      elem.autocomplete({ 
       source: autoCompleteDataService.getSource(), //from your service 
       minLength: 2 
      }); 
     } 
    }; 
}); 

और अपने मार्कअप में इसका उपयोग करने ... आपने क्या चुना है के साथ $ गुंजाइश पर एक मूल्य निर्धारित करने के लिए नोटिस एनजी मॉडल।

<div ng-controller="Ctrl1"> 
    <input type="text" ng-model="foo" auto-complete/> 
    Foo = {{foo}} 
</div> 

यह केवल मूल बातें है, लेकिन उम्मीद है कि इससे मदद मिलती है।

Answer 2

मुझे $ http सेवा का उपयोग करके यह काम करने के लिए थोड़ा और काम करना पड़ा।

सेवा:

app.factory("AutoCompleteService", ["$http", function ($http) { 
    return { 
     search: function (term) { 
      return $http.get("http://YourServiceUrl.com/" + term).then(function (response) { 
       return response.data; 
      }); 
     } 
    }; 
}]); 

निर्देश:

app.directive("autocomplete", ["AutoCompleteService", function (AutoCompleteService) { 
    return { 
     restrict: "A", 
     link: function (scope, elem, attr, ctrl) { 
      elem.autocomplete({ 
       source: function (searchTerm, response) { 
        AutoCompleteService.search(searchTerm.term).then(function (autocompleteResults) { 
         response($.map(autocompleteResults, function (autocompleteResult) { 
          return { 
           label: autocompleteResult.YourDisplayProperty, 
           value: autocompleteResult 
          } 
         })) 
        }); 
       }, 
       minLength: 3, 
       select: function (event, selectedItem) { 
        // Do something with the selected item, e.g. 
        scope.yourObject= selectedItem.item.value; 
        scope.$apply(); 
        event.preventDefault(); 
       } 
      }); 
     } 
    }; 
}]); 

एचटीएमएल:

<input ng-model="YourObject" autocomplete />