Угловая директива теста выдает ошибку

Question

Вот директива, которая оборачивает автозаполнение jquery-ui

angular.module('myApp.directives', [])
    .directive('autocomplete', function () {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            template: '<input ng-model="autocomplete" type="text"/>',
            link: function (scope, element, attrs) {
                scope.$watch(attrs.typedvalue, function () {
                    element.autocomplete({
                        search: function (event) {
                            scope[attrs.typedvalue] = this.value;
                            scope[attrs.fullselection] = '';
                            scope[attrs.selectionid] = '';
                            scope[attrs.shortselection] = '';
                            scope.$apply();
                        },
                        source: scope.fetchList,
                        select: function (event, ui) {
                            scope[attrs.fullselection] = ui.item.label;
                            scope[attrs.selectionid] = ui.item.itemId;
                            scope[attrs.shortselection] = ui.item.value;
                            scope.$apply();
                        }
                    });
                });
            }
        };
    });

Я пытаюсь протестировать его с помощью следующего теста (следуя инструкциям здесь https://github.com/vojtajina/ng-directive-testing):

describe('Directives', function () {

    beforeEach(module('myApp.directives'));

    describe('autocomplete directive', function () {
        var elm, scope;
        beforeEach(inject(function ($rootScope, $compile) {
            elm = angular.element('<autocomplete fullselection="fullDstn" shortselection="dstn" selectionid="geonameId" typedvalue="typedValue" id="DstnSlctr"/>');
            scope = $rootScope;
            $compile(elm)(scope);
            scope.$digest();
        }));

        it('should create input', inject(function ($compile, $rootScope) {
            expect(elm.id).toBe('DstnSlctr');
            expect(elm.prop('tagName')).toBe('INPUT');
            debugger;
        }));
    });
});

Но я получаю ошибку:

        TypeError: Object [[object HTMLInputElement]] has no method 'autocomplete'
            at Object.fn (C:/Users/kmukhort/Documents/_files/TMate/AngularTest/a
pp/js/directives.js:13:33)

в строке element.autocomplete({Я подозреваю, что функциональность jquery-ui не привязана к элементу, пока $ compile. Я имею в виду библиотеку jquery-ui в testacular.config

basePath = '../';

files = [
...
  'app/lib/jquery-ui-*.js',
];

Подскажите, пожалуйста, что я делаю не так?

Спасибо! Ксения

Answer 1

Я думаю, вам нужно заменить:

element.autocomplete(...);

С:

$(element).autocomplete(...);