在 angularjs 中使用自定义指令时出错

Question

我正在使用来自 jsfiddle 的 "auto-complete" 指令并收到错误 iElement.autocomplete is not a function。请帮我解决这个错误。

directive.js

starter.directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: function(request, response) {
                    var res = new Array()
                    for (var i=0; i<scope[iAttrs.uiItems].length; i++) {
                        if (scope[iAttrs.uiItems][i].indexOf(request.term) == 0) {
                               res.push(scope[iAttrs.uiItems][i]);
                        }
                    }
                    response(res);
                },
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
});

.html 文件

<input type="text" auto-complete="true" ui-items="names" ng-model="selected" class="tagdiv" style="color:#fff" placeholder="Tag your category">

.js 文件

$scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];

Answer 1

首先，在您的 jsfiddle 中您没有包含 jquery-ui javascript，这会导致您提到的错误。

此外，您的指令的实现是错误的。该指令应该 return 具有指令配置的对象，而不是函数：

starter.directive('autoComplete', function($timeout) {
    return {
        restrict: "AE",
        scope: {
            uiItems: "="
        },
        link: function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                // not sure why you had a whole function here, this should do the trick:
                source: scope.uiItems,
                select: function() {
                    $timeout(function() {
                        iElement.trigger('input');
                    }, 0);
                }
            });
        }
    }
});

见this jsfiddle

在 angularjs 中使用自定义指令时出错

Getting error while using a custom directive in angularjs

javascript

autocomplete

directive

jsfiddle

angularjs