使用jQuery自动完成+ AngularJS问题 [英] Problems with jQuery autocomplete + AngularJS
问题描述
我使用我的网页上AjgularJS并想添加一个字段中使用自动完成从jQueryUI的，并自动完成不触发Ajax调用。
我已经测试脚本的网页上没有角（NG-应用和NG-控制器）和它的作品很好，但是当我把这个脚本在页面上与angularjs将停止工作。
任何想法？
jQuery脚本：
$（函数（）{ $（'＃txtProduct'）。自动完成（{
来源：函数（请求，响应）{ 警报（request.term）; }，
的minLength：3，
选择：函数（事件，UI）{ }
}）;}）;
- 有趣，注意：当我调用脚本在Chrome检查自动完成开始工作！
- 版本：AngularJS：1.0.2 - jQueryUI的：1.9.0
结论：
标记
＆LT; DIV NG-应用=TestApp＆GT;
＆LT; H2＆GT;指数＆LT; / H＆GT;
＆LT; DIV NG控制器=TestCtrl＆GT; ＆LT;输入类型=文字自动完成＆GT;＆DDD LT; /输入＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
角脚本
＆LT;脚本类型=文/ JavaScript的＆GT; VAR应用= angular.module（'TestApp'，[]）; 功能TestCtrl（$范围）{} app.directive（自动完成，函数（）{
返回功能postLink（范围，iElement，iAttrs）{ $（函数（）{
$（iElement）.autocomplete（{
来源：功能（REQ，RESP）{
警报（req.term）;
}
}）;
}）; }
}）;＆LT; / SCRIPT＆GT;
也许你需要做的仅仅是在一个角路......也就是说，用一个指令来设置DOM元素，并做事件绑定，使用服务，让您的数据，并使用控制器做你的业务逻辑，... ...所有，同时充分利用了依赖注入善良就是角...
一个服务，让您自动完成数据...
app.factory（'autoCompleteDataService'，[功能（）{
返回{
的getSource：功能（）{
//这是你要设置你的源...可能是外部来源，我想。 something.php
返回['苹果'，'桔子'，'香蕉'];
}
}
}]）;
指令去做建立自动完成插件的工作。
app.directive（自动完成，功能（autoCompleteDataService）{
返回{
限制：'A'，
链接：功能（范围，ELEM，ATTR，CTRL）{
// ELEM是精简版的对象一个jquery如果jQuery是不是present，
//但jQuery和jQuery用户界面，这将是一个完整的jQuery对象。
elem.autocomplete（{
来源：autoCompleteDataService.getSource（）//从服务
的minLength：2
}）;
}
};
}）;
而在你的标记使用它...注意NG-模型在$范围内设置一个值与您所选择的东西。
＆LT; DIV NG控制器=CTRL1＆GT;
＆LT;输入类型=文本NG模型=foo的自动完成/＆GT;
美孚= {{美孚}}
＆LT; / DIV＆GT;
这只是基础知识，但希望有帮助。
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屋！
