AngularJs ui-bootstrap Typeahead with scroll

Question

我使用 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

任何解决方案可以使这项工作？

Answer 1

我能够使用以下指令解决此问题：

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

感谢发帖：up/down arrow key issue with typeahead control (angular bootstrap UI)