在 Angular 指令中使用基于 jQuery 的自动完成插件

Posted 2023-03-05

【中文标题】在 Angular 指令中使用基于 jQuery 的自动完成插件

【英文标题】：Working a jQuery-based autocomplete plugin into an Angular directive

【发布时间】：2016-09-04 15:18:31

【问题描述】：

我在从 Web api 提取员工姓名的指令中使用了 Devbridge Ajax jQuery autocomplete plugin。 I am having an issue updating the model when a value is selected or on blur of the field.这是我的代码：

Plunker

更具体地说是我的指令：

app.directive('employeeName', ['employeeService', function (employeeService) 
    return 
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) 

            employeeService.getAll()
                .then(function (data) 
                    $(elem).devbridgeAutocomplete(
                        lookup: $.map(data, function (employee, i) 
                            return  value: employee.name, data: employee ;
                        ),
                        onSelect: function () 
                            console.log('select');
                            update();
                        ,
                        onInvalidateSelection: function () 
                            $(this).val('');
                        
                    );
                );

            elem.on('blur', function () 
                console.log('blur');
                update();
            );

            var update = function () 
                var value = elem[0].value;

                scope.$apply(function () 
                    ctrl.$setViewValue(value);
                    ctrl.$render();
                );

                console.log(value);
                console.log(ctrl.$modelValue)
                console.log(scope.organizer);
            ;
        
    ;
]);  

编辑：解决方案

GitHub：jQuery-Autocomplete-to-Angular

【问题讨论】：

什么不起作用？对我来说似乎很好......

@Dan 问题似乎在我将其移入 Plunker 后自行解决。我只需要深入研究我的代码，看看还有什么可能影响它。无论如何，感谢您的调查。

好的。我注意到退格键的行为并不理想。

【参考方案1】：

放入 Plunker 时似乎工作得很好......