我在我的页面上使用AjgularJS，并希望添加一个字段来使用jqueryui的自动完成，并且自动完成不会触发ajax调用。
我已经测试了没有角度(ng-app和ng控制器)的页面上的脚本，它的工作原理很好，但是当我将脚本放在具有angularjs的页面上时，它将停止工作。
任何想法？
jquery脚本：
@H_301_8@$(function () { $('#txtProduct').autocomplete({ source: function (request,response) { alert(request.term); },minLength: 3,select: function (event,ui) { } }); });>有趣的注意事项：当我打电话给Chrome检查员的脚本时，自动完成开始工作！
>版本：AngularJS：1.0.2 – JqueryUI：1.9.0
结论：
来自jQueryUI的自动完成小部件必须从AngularJS的自定义指令中进行初始化，例如：
角色脚本
@H_301_8@<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>解决方法
也许你只需要以“有角度的方式”来实现，也就是说，使用一个指令来设置你的DOM元素，并做事件绑定，使用一个服务来获取你的数据，并使用一个控制器做你的业务逻辑…所有，同时利用依赖注入的良好性是Angular …
@H_301_8@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'];
}
}
}]);
@H_301_8@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模型设置一个值在$范围与您选择。
@H_301_8@<div ng-controller="Ctrl1"> <input type="text" ng-model="foo" auto-complete/> Foo = {{foo}} </div>这只是基础，但希望有帮助。
