我在我的页面上使用AjgularJS，并希望添加一个字段来使用jqueryui的自动完成，并且自动完成不会触发ajax调用。
我已经测试了没有角度(ng-app和ng控制器)的页面上的脚本，它的工作原理很好，但是当我将脚本放在具有angularjs的页面上时，它将停止工作。
任何想法？
jquery脚本：
$(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的自定义指令中进行初始化，例如：
<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>
解决方法
也许你只需要以“有角度的方式”来实现，也就是说，使用一个指令来设置你的DOM元素，并做事件绑定，使用一个服务来获取你的数据，并使用一个控制器做你的业务逻辑…所有，同时利用依赖注入的良好性是Angular …
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模型设置一个值在$范围与您选择。
<div ng-controller="Ctrl1">
<input type="text" ng-model="foo" auto-complete/>
Foo = {{foo}}
</div>
这只是基础，但希望有帮助。
