jQuery自动完成+ AngularJS的问题

我在我的页面上使用AjgularJS，并希望添加一个字段以使用jqueryui中的自动完成function，并且自动完成function不会触发ajax调用。

我已经在没有角度（ng-app和ng-controller）的页面上测试了脚本并且它运行良好，但是当我将脚本放在带有angularjs的页面上时它会停止工作。

任何的想法？

jquery脚本：

$(function () { $('#txtProduct').autocomplete({ source: function (request, response) { alert(request.term); }, minLength: 3, select: function (event, ui) { } }); }); 

• 有趣的是：当我在Chrome检查器上调用脚本时，自动完成function开始工作！
• 版本：AngularJS：1.0.2 – JqueryUI：1.9.0

结论：来自jQueryUI的自动完成小部件必须从AngularJS的自定义指令内部初始化，例如：

标记

 
 
index
 
 ddd 
  

角度脚本

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

Answer 1

也许您只需要以“有角度的方式”进行操作……也就是说，使用指令来设置DOM元素并进行事件绑定，使用服务来获取数据，并使用控制器来开展业务逻辑……同时利用Angular的dependency injection优势……

获取自动填充数据的服务…

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

并在标记中使用它…注意ng-model，用你选择的内容在$ scope上设置一个值。

 
  Foo = {{foo}}  

这只是基础知识，但希望这会有所帮助。

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, eg scope.yourObject= selectedItem.item.value; scope.$apply(); event.preventDefault(); } }); } }; }]); 

html：