我在页面上使用 AjgularJS,想要添加一个字段以使用 jqueryui 的自动完成功能,并且自动完成功能不会触发 ajax 调用。
我已经在没有 Angular 的页面(ng-app 和 ng-controller)上测试了脚本,它运行良好,但是当我将脚本放在带有 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>
Angular 脚本
<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>
最佳答案
也许您只需要以“Angular 方式”进行操作...也就是说,使用指令来设置 DOM 元素并进行事件绑定(bind),使用服务来获取数据,并使用 Controller 来执行您的业务逻辑...同时利用 Angular 的依赖注入(inject)优点...
获取自动完成数据的服务...
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 上设置一个值。
<div ng-controller="Ctrl1">
<input type="text" ng-model="foo" auto-complete/>
Foo = {{foo}}
</div>
这只是基础知识,但希望有所帮助。
关于jquery - jQuery 自动完成 + AngularJS 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12959516/