AngularJs ui-bootstrap Typeahead со свитком - PullRequest
Новая
       20

AngularJs ui-bootstrap Typeahead со свитком

0 голосов
/ 19 сентября 2018

Я создал typeahead для своего ввода, используя angularjs ui-bootstrap.Код как показано ниже: 

    <div id="scrollable-dropdown-menu">
      <input type="text" name="uName" ng-model="uName" autocomplete="off" 
      required class="form-control input-medium" placeholder="Enter user 
      name..." typeahead="uName.uName for uName in getUserNames($viewValue)" 
      typeahead-on-select='onSelect($item, $model, $label)'/>
    </div>

Я хотел добавить к этому свиток, чтобы обернуть его вокруг div и добавить css для достижения прокрутки.

Проблема в том, если я начну связывать что-тои используйте клавиатуру со стрелкой вниз на прокрутке. Я не вижу выбранный элемент, т.е. прокрутка не перемещается с помощью клавиши со стрелкой.Я должен использовать мою мышь, чтобы пронзить.Я верю в это, потому что я устанавливаю высоту div.

Я создал демо-версию, чтобы показать проблему следующим образом: https://codepen.io/kaka1981/pen/YOvYRY

Какое-нибудь решение для этой работы?

1 Ответ

0 голосов
/ 19 сентября 2018

Я смог решить эту проблему, используя следующую директиву: 

  .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);
         }
    };
});

Благодаря сообщению по адресу: Проблема с клавишами стрелок вверх / вниз с контролем над головой (угловой загрузочный интерфейс)

...