jQuery自动完成+ AngularJS的问题

jQuery自动完成+ AngularJS的问题

也许您只需要以一种“有角度的方式”进行 *** 作即可……也就是说，使用指令来设置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模型使用您选择的内容在$ scope上设置一个值。

<div ng-controller="Ctrl1">    <input type="text" ng-model="foo" auto-complete/>    Foo = {{foo}}</div>

这只是基础知识，但希望能有所帮助。