小编mar*_*rkp的帖子

我正在尝试创建一个使用jQueryUI的自动完成小部件的自定义指令。我希望这尽可能声明。这是所需的标记：

<div>
    <autocomplete ng-model="employeeId" url="/api/EmployeeFinder" label="{{firstName}} {{surname}}" value="id" />
</div>

因此，在上面的示例中，我希望指令对指定的url进行AJAX调用，并在返回数据时，在文本框中显示从结果中的表达式计算出的值，并将id属性设置为员工编号。这是我对指令的尝试。

app.directive('autocomplete', function ($http) {
    return {
        restrict: 'E',
        replace: true,
        template: '<input type="text" />',
        require: 'ngModel',

        link: function (scope, elem, attrs, ctrl) {
            elem.autocomplete({
                source: function (request, response) {
                    $http({
                    url: attrs.url,
                    method: 'GET',
                    params: { term: request.term }
                })
                .then(function (data) {
                    response($.map(data, function (item) {
                        var result = {};

                        result.label = item[attrs.label];
                        result.value = item[attrs.value];

                        return result;
                    }))
                });
                },

                select: function (event, ui) {                    
                    ctrl.$setViewValue(elem.val(ui.item.label));                    

                    return …