jQuery自动完成+AngularJS的问题?

  • 回答 (2)
  • 关注 (0)
  • 查看 (78)

我在我的页面上使AjgularJS,并且希望添加一个字段来使用jqueryui中的自动完成,并且autoComplete不触发Ajax调用。

我已经在没有角的页面上测试了脚本(ng-app和ng-控制器),它工作得很好,但是当我将脚本放在带有angularjs的页面上时,它就停止工作了。

jQuery脚本:

$(function () {

    $('#txtProduct').autocomplete({
        source: function (request, response) {

            alert(request.term);

        },
        minLength: 3,
        select: function (event, ui) {

        }
    });

});
  • 版本:AngularJS:1.0.2-JqueryUI:1.9.0

结论:必须在AngularJS的自定义指令中初始化来自jQueryUI的自动完成小部件,例如:

标记

<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>
楼主石乐志楼主石乐志提问于
特殊枪的潘鬼鬼前端开发回答于

使用指令来设置DOM元素和进行事件绑定,使用服务来获取数据。并使用控制器来执行业务逻辑

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
            });
        }
    };
});

并且在标记中使用它,用您选择的内容在$作用域上设置一个值。

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

回答过的其他问题

OCR文字识别技术有哪些应用?

识别快递运单啊,手写体OCR已运用到运单识别场景,解决了物流行业每日快递单人工输入工作量极大且极易出错,非常低效等问题,传统人工识别按照3min/单,1000单需要6.25个人/天,保证运单时效则需要耗费大量人力,考虑人力成本则影响运单及时性,成本和服务难两全。OCR运单识别速度...... 展开详请

无法理解python中.mode()的使用?

已采纳
mode 返回一个系列: df.mode() 0 17 dtype: int64 从此,您可以通过调用来获取第一个项目 df.mode()[0] 17 请注意,始终返回Series,有时如果模式有多个值,则返回它们: pd.Series([1, 1, 2, 2, 3,...... 展开详请

无法更改网格中的python路径(R)

我观察到.RProfile中的技术“use_python('path')”和Sys.setenv(RETICULATE_PYTHON ='path')的策略都不适用于我(当然我确信它一定适用于其他人。) 在任何情况下终端线, which -a python python3 确...... 展开详请

Docker:向已经创建的容器添加重新启动策略?

已采纳

在最近版本的docker(从1.11开始)中,有一个update命令:

docker update --restart=always <container>

Python多种图像处理库的比较与比较

我已广泛使用mahotas,但目前已切换到scikit-image。我发现scikit-image的功能比mahotas更广泛(我需要经常测试各种图像处理算法)。Mahotas的主要优点是简单的代码和良好的文档,这是与其mahotas原则的一致。因此,如果您需要基本功能和更快的...... 展开详请

如何在Google表格中使用VBA突出显示带有特殊字符和大写字母的单元格?

如果您使用的是Google Apps,则最好通过GAS(Google Apps脚本)进行操作。这是基于JavaScript的Google等同于VBA。

关于作者

扫码关注云+社区

领取腾讯云代金券