Question

我尝试使用＆＃34; autocomplete＆＃34;实现文本框自动完成功能。 Angular的指令，但它不被应用程序识别。这是我的应用程序：

var app = angular.module('app', [
'ngRoute',
'ngCookies',

]）;

app.service('AutoCompleteService', ['$http', function ($http) {
return {
    search: function (term) {
        return $http.get('https://myapi.net/suggest?query='+term+'&subscription-key=XYZ').then(function (response) {
            return response.data;
        });
    }
};

}]）;

app.directive('autoComplete', ['AutoCompleteService', function (AutoCompleteService) {
return {
    restrict: 'A',
    link: function (scope, elem, attr, ctrl) {
        elem.autocomplete({
            source: function (searchTerm, response) {
                AutoCompleteService.search(searchTerm.term).then(function (autocompleteResults) {
                    response($.map(autocompleteResults, function (autocompleteResult) {
                        return {
                            label: autocompleteResult.ID,
                            value: autocompleteResult.Val
                        }
                    }))
                });
            },
            minLength: 3,
            select: function (event, selectedItem) {
                // Do something with the selected item, e.g. 
                scope.yourObject = selectedItem.item.value;
                scope.$apply();
                event.preventDefault();
            }
        });
    }
};

}]）;

我将指令名称如下：

<input type="text" id="search" ng-model="searchText" placeholder="Enter Search Text" autocomplete />

指令不会调用仍然是AutoCompleteService。我在这里做错了吗？

Answer 1

并不是指令中没有调用您的服务，而是根据您提供的html完全不调用您的指令。您应该通过将驼峰案例表示法转换为虚线表示法来调用指令，如下所示：

<input id="search" ng-model="searchText" auto-complete />

您可以在AngularJS Directive Documentation中找到有关指令匹配的所有内容。

AngularJS中的自动完成指令问题

1 个答案: