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

【问题标题】：Working a jQuery-based autocomplete plugin into an Angular directive在 Angular 指令中使用基于 jQuery 的自动完成插件
【发布时间】：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 后自行解决。我只需要深入研究我的代码，看看还有什么可能影响它。无论如何，感谢您的调查。
好的。我注意到退格键的行为并不理想。

标签： jquery angularjs autocomplete

【解决方案1】：

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

【讨论】：