jQuery自动完成+ AngularJS的问题

一尘不染

jQuery自动完成+ AngularJS的问题

angularjs

我在页面上使用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>

角度脚本

<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>

阅读 207

2020-07-04

共1个答案

一尘不染

也许您只需要以一种“有角度的方式”进行操作即可……也就是说，使用指令来设置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>

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

2020-07-04