无法在angularjs中使用jquery jquery.autocomplete.js答案

【问题标题】：Unable to use jquery jquery.autocomplete.js in angularjs无法在angularjs中使用jquery jquery.autocomplete.js
【发布时间】：2014-03-25 18:23:21
【问题描述】：

我正在尝试借助 angularjs 中的 jquery.autocomplete.js 对输入文本搜索字段进行自动完成。但它不起作用。我检查了萤火虫控制台没有错误。请帮助我。

代码

 app.directive('autoComplete', function(autoCompleteDataService) {
    return {
            restrict: 'A',
           link: function(scope, elem, attr, ctrl) {

        elem.autocompleteArray({
            source: autoCompleteDataService.getSource(), 
            minLength: 2
        });
    }
};

});

app.factory('autoCompleteDataService', [function() {
    return {
        getSource: function() {

        return ['apples', 'oranges', 'bananas'];
       }
     }
 }]);

HTML代码

 <input type="text" auto-complete/>

【问题讨论】：

您确定您的服务已正确注入您的指令吗？
通过 chrome 或 firebug 调试器检查注入的“autoCompleteDataService”是否具有您在服务中定义的功能。或使用 console.log(autoCompleteDataService)

标签： javascript jquery angularjs autocomplete

【解决方案1】：

你有几个语法错误，一些缺少大括号，命名，最后，你忘记用 JQuery 包围元素，无论如何这里是一个使用 JQuery ui 自动完成的工作示例。

示例：

app.factory('autoCompleteDataService', [function() {
    return {
        getSource: function() {

        return ['apples', 'oranges', 'bananas'];
       }
     }
 }]);

 app.directive('autoComplete', function(autoCompleteDataService) {
    return {
            restrict: 'A',
           link: function(scope, elem, attr, ctrl) {

        $(elem).autocomplete({
            source: autoCompleteDataService.getSource(), 
            minLength: 2
        });
    }
    }})

现场示例：http://jsfiddle.net/choroshin/gKcMP/

更新：

使用 JQuery autocomplete 插件的工作示例（仅适用于 jquery 版本

var app=angular.module('App', []);

app.factory('autoCompleteDataService', [function() {
    return {
        getSource: function() {

        return ['apples', 'oranges', 'bananas'];
       }
     }
 }]);

 app.directive('autoComplete', function(autoCompleteDataService) {
    return {
            restrict: 'A',
           link: function(scope, elem, attr, ctrl) {

        $(elem).autocompleteArray(autoCompleteDataService.getSource(),{
             minLength: 2
        });
    }
    }})

实时示例：http://jsfiddle.net/choroshin/gKcMP/2/

【讨论】：

@Alex.its 对我不起作用..我尝试在 firebug 控制台中使用 console.log(autoCompleteDataService) 它给了我参考错误：未定义 autoCompleteDataService。你能告诉我如何纠正这个问题吗？
正如我所说，您的指令中缺少一些大括号，您是否尝试过查看我的实际示例？
是的..你正在使用 jquery-ui.js 而我正在使用 jquery.autocomplete.js 。所以 elem.autocompleteArray 根据this.. 是正确的语法
MinLength 不起作用..我尝试了 minChars 这也不起作用
这是插件问题，不是角度问题。