jquery - 将基于 jQuery 的自动完成插件应用到 Angular 指令中

Question

我正在使用Devbridge Ajax jQuery autocomplete plugin在从 Web API 中提取员工姓名的指令中。当选择值或字段模糊时，我在更新模型时遇到问题。这是我的代码:

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

Answer 1

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