проблема со стрелкой вверх/вниз с управлением вводом текста (угловой пользовательский интерфейс начальной загрузки)

Вот рабочий планкер

В этом я переопределяю тип ui-bootstrap, как это предлагается в ответ.

Ниже приведены изменения, которые мне нужны, чтобы заставить его работать:

Добавлена ​​следующая строка в директиве typeaheadMatch (строка - 335 файла ui.bootstrap.typeahead.js в плункере)

element[0].focus();

Добавлена ​​директива shouldFocus (строка - 314 -350)

.directive('shouldFocus', function(){
  return {
   restrict: 'A',
   link: function(scope,element,attrs){
     scope.$watch(attrs.shouldFocus,function(newVal,oldVal){
       element[0].scrollIntoView(false);
     });
   }
 };
})

и, наконец, добавлена ​​директива в li (строка - 372)

should-focus=\"isActive($index)\"

Ответ @ user1690588 отлично работает. Единственная проблема в том, что когда последний элемент в списке активен и вы нажимаете клавишу вниз. scrollToView для первого элемента не работает. Я добавил проверку, чтобы убедиться, что newVal истинен, что, кажется, исправляет это.

  if (newVal) { 
    element[0].scrollIntoView(false);
  }

http://plnkr.co/edit/05yoHSlhvX740tgiRRXm

Я использовал другой подход для решения этой проблемы, так как ни одно из решений здесь не удовлетворяет. В основном:

• Достигнув последнего элемента и нажав клавишу ВНИЗ, вы увидите первый элемент.
• наведение курсора на элементы не должно вызывать прокрутку всплывающего окна Typeahead
• использование колеса прокрутки мыши не должно вызывать странного поведения во всплывающем окне Typeahead
• исправление должно избегать изменения исходников AngularUI Bootstrap

Расширение директив AngularUI Bootstrap и прослушивание только определенных ключевых событий, по-видимому, обеспечивает более чистый обходной путь, как вы можете видеть здесь: http://plnkr.co/edit/QuZw7j?p=preview

angular.module('ui.bootstrap.demo')
    .directive('typeahead', function () {
        return {
            restrict: 'A',
            priority: 1000, // Let's ensure AngularUI Typeahead directive gets initialized first!
            link: function (scope, element, attrs) {
                // Bind keyboard events: arrows up(38) / down(40)
                element.bind('keydown', function (evt) {
                    if (evt.which === 38 || evt.which === 40) {
                        // Broadcast a possible change of the currently active option:
                        // (Note that we could pass the activeIdx value as event data but AngularUI Typeahead directive
                        //  has its own local scope which makes it hard to retrieve, see:
                        //  https://github.com/angular-ui/bootstrap/blob/7b7039b4d94074987fa405ee1174cfe7f561320e/src/typeahead/typeahead.js#L104)
                        scope.$broadcast('TypeaheadActiveChanged');
                    }
                });
            }
        };
    }).directive('typeaheadPopup', function () {
        return {
            restrict: 'EA',
            link: function (scope, element, attrs) {
                var unregisterFn = scope.$on('TypeaheadActiveChanged', function (event, data) {
                    if(scope.activeIdx !== -1) {
                        // Retrieve active Typeahead option:
                        var option = element.find('#' + attrs.id + '-option-' + scope.activeIdx);
                        if(option.length) {
                            // Make sure option is visible:
                            option[0].scrollIntoView(false);
                        }
                    }
                });

                // Ensure listener is unregistered when $destroy event is fired:
                scope.$on('$destroy', unregisterFn);
             }
        };
    });

Протестировано с AngularJS 1.4.5 и AngularUI Bootstrap 0.13.4, но это должно работать и с другими последними версиями.

[Обратите внимание, что мне пришлось вручную включить jQuery, так как тот, который был предварительно загружен Plunker (jQuery v1.8.3), не сможет получить текущую активную опцию.]

Принятое решение потерпит неудачу, если главное окно уже прокручивается. @user1690588 был на правильном пути.

Отредактируйте файл ui-bootstrap-tpls-0.13.3.js и поместите его в строке 5205 выше .filter('typeaheadHighlight'), по крайней мере, до тех пор, пока команда AngularUI не решит это исправить. А также применить другое изменение к шаблону, на который ссылается принятое решение.

.directive('shouldFocus', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.shouldFocus, function (newVal, oldVal) {
                if (newVal && element.prop("class").indexOf("active")) {
                    var par = element.parent("ul");
                    var scrollingTo = element.offset().top - par.offset().top + par.scrollTop();
                    // uncomment below section if you want the selected content to be 
                    // viewed at half the box height
                    // scrollingTo = scrollingTo - (par.height() / 2); 
                    par.scrollTop(scrollingTo);
                }
            });
        }
    }
})

Кроме того, если вы хотите избавиться от артефакта мыши, когда она начинает прокручиваться вверх до первой записи или вниз до последней записи, удалите из шаблона атрибут ng-mouseenter.