jQuery 自动完成 + AngularJS 的问题 [英] Problems with jQuery autocomplete + AngularJS
问题描述
我在我的页面上使用 AjgularJS 并想添加一个字段以使用 jqueryui 中的自动完成功能，并且自动完成不会触发 ajax 调用.
我已经在没有 angular 的页面(ng-app 和 ng-controller)上测试了脚本，它运行良好，但是当我将脚本放在带有 angularjs 的页面上时，它停止工作.
有什么想法吗?
jquery 脚本:
$(function () {$('#txtProduct').自动完成({来源:功能(请求，响应){警报(请求.术语)；},最小长度:3，选择:功能(事件，用户界面){}});});- 有趣的提示:当我在 Chrome 检查器上调用脚本时，自动完成开始工作！！！
- 版本:AngularJS:1.0.2 - JqueryUI:1.9.0
结论:来自 jQueryUI 的自动完成小部件必须从 AngularJS 的自定义指令内部初始化，例如:
标记
<h2>索引</h2><div ng-controller="TestCtrl"><input type="text" auto-complete>ddd</input>角度脚本
也许你只需要以一种角度方式"来做……也就是说，使用一个指令来设置你的 DOM 元素并进行事件绑定，使用服务获取数据，并使用控制器执行业务逻辑...同时利用 Angular 的依赖注入优势...
获取自动完成数据的服务...
app.factory('autoCompleteDataService', [function() {返回 {获取源:函数(){//这是您设置源的地方...我想可能是外部源.'东西.php'返回 ['苹果', '橙子', '香蕉'];}}}]);用于设置自动完成插件的指令.
app.directive('autoComplete', function(autoCompleteDataService) {返回 {限制:'A'，链接:功能(范围，元素，属性，ctrl){//如果 jquery 不存在，elem 是一个 jquery lite 对象，//但是对于 jquery 和 jquery ui，它将是一个完整的 jquery 对象.elem.自动完成({source: autoCompleteDataService.getSource(),//来自你的服务最小长度:2});}};});并在您的标记中使用它...注意 ng-model 使用您选择的内容在 $scope 上设置一个值.
<input type="text" ng-model="foo" 自动完成/>富 = {{富}}这只是基础知识，但希望能有所帮助.
i'm using AjgularJS on my page and want to add a field to use autocomplete from jqueryui and the autocomplete does not fires the ajax call.
i've tested the script on a page without angular (ng-app and ng-controller) and it works well, but when i put the script on a page with angularjs it stops working.
any idea?
jquery script:
$(function () {
$('#txtProduct').autocomplete({
source: function (request, response) {
alert(request.term);
},
minLength: 3,
select: function (event, ui) {
}
});
});
- interesting note: when i call the script on Chrome inspector the autocomplete starts working!!!
- Versions: AngularJS: 1.0.2 - JqueryUI: 1.9.0
CONCLUSION: The autocomplete widget from jQueryUI must be initializes from inside a custom directive of AngularJS as the example:
Markup
<div ng-app="TestApp">
<h2>index</h2>
<div ng-controller="TestCtrl">
<input type="text" auto-complete>ddd</input>
</div>
</div>
Angular script
<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>
Perhaps you just need to do it in an "angular way"... that is, to use a directive to set up your DOM elements and do event bindings, use a service to get your data, and use a controller to do your business logic... all while leveraging the dependency injection goodness that is Angular...
A service to get your autocomplete data...
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'];
}
}
}]);
a directive to do the work of setting up the autocomplete plugin.
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
});
}
};
});
And using it in your markup... notice the ng-model to set a value on the $scope with what you select.
<div ng-controller="Ctrl1">
<input type="text" ng-model="foo" auto-complete/>
Foo = {{foo}}
</div>
That's just the basics, but hopefully that helps.
这篇关于jQuery 自动完成 + AngularJS 的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
