Problemy z autouzupełnieniem jQuery + AngularJS

Question

Używam AjgularJS na mojej stronie i chcę dodać pole do korzystania z autouzupełniania z jqueryui, a autouzupełnianie nie wywołuje wywołania ajax.

Testowałem skrypt na stronie bez kątowej (ng-app i ng-kontroler) i działa dobrze, ale kiedy umieściłem skrypt na stronie z angularjs przestał działać.

jakiś pomysł? Skrypt

jQuery:

$(function() { 

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

      alert(request.term); 

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

     } 
    }); 

}); 

• interesująca uwaga: gdy zgłoszę skrypt na Chrome Inspektor autouzupełnianie rozpoczyna pracę !!!
• Wersje: angularjs: 1.0.2 - jQueryUI: 1.9.0

WNIOSEK: Widget autouzupełnianie z jQueryUI musi być inicjuje od wewnątrz dyrektywy niestandardowej angularjs jako przykład:

Markup

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

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

    </div> 
</div> 

kątowa skrypt

<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

Może po prostu trzeba to zrobić w „kątowego sposób:” ... to znaczy, aby użyć dyrektywy, aby skonfigurować elementów DOM i zrobić powiązania zdarzeń, skorzystać z usługi, aby uzyskać dane, i użyć kontrolera zrobić swoją logikę biznesową ... wszystko to przy wykorzystaniu zastrzyku dobroć zależnościach, które jest kątowe ...

usługę, aby uzyskać dane autouzupełniania ...

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

dyrektywy zrobić praca z konfiguracją wtyczki autouzupełniania.

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

Używanie go w znacznikach ... zwróć uwagę na model ng, aby ustawić wartość w polu $ z wybranymi opcjami.

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

To tylko podstawy, ale mam nadzieję, że pomaga.

Answer 2

Musiałem zrobić trochę więcej pracy, aby to działało, korzystając z usługi $ http.

Usługa:

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

dyrektywy:

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

HTML:

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