角度ui-bootstrap提前输入建议-滚动 [英] Angular ui-bootstrap typeahead suggestion - scroll

问题描述

根据此链接: typeahead控件的上/下箭头键问题(角度引导UI)

我已经在我的js中添加了以下行:

i have added these line in my js:

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

滚动时，我们会受到更多干扰，滚动不流畅. 在添加此代码之前，滚动正常且流畅. 请有人帮我吗?

while scrolling, we get some more disturb, scroll was not smoothy. Before adding this code, scroll was normal and smoothy. Please anyone help me?

推荐答案

您好，这是另一个仅用于keyup事件的代码，用于在上/下键按下时调整滚动高度 您只需要在angular ui的typeahead指令中为keyup添加一个函数

Hi here is another code only for keyup event to adjust the scroll height while up/down keypress you need to add a function only to keyup in the typeahead directive in angular ui

搜索指令('typeahead' 找到 fireRecalculating 函数，然后粘贴以下函数

search directive('typeahead' in the angular ui js file find fireRecalculating function before it paste the following function

function makeSureVisible(){
            $timeout(function(){
                $el = popUpEl.find('.active');
                if($el.length>0)
                {
                    var elTop, elBottom, nodeScrollTop, nodeHeight;
                    elTop = $el.position().top;
                    console.log(elTop);
                    elBottom = elTop + $el.outerHeight(true);

                    nodeScrollTop = popUpEl.scrollTop();
                    nodeHeight = popUpEl.height() + parseInt(popUpEl.css("paddingTop"), 10) + parseInt(popUpEl.css("paddingBottom"), 10);
                    if (elTop < 0) {
                        popUpEl.scrollTop(nodeScrollTop + elTop);
                    } else if (nodeHeight < elBottom) {
                        popUpEl.scrollTop(nodeScrollTop + (elBottom - nodeHeight));
                    }  
                }
            });  
        }

现在找到附加的keyup功能.调用上述函数

now find keyup function attached. call the above function

element.bind('keydown', function(evt) {
          //typeahead is open and an "interesting" key was pressed
          if (scope.matches.length === 0 || HOT_KEYS.indexOf(evt.which) === -1) {
            return;
          }

          // if there's nothing selected (i.e. focusFirst) and enter or tab is hit, clear the results
          if (scope.activeIdx === -1 && (evt.which === 9 || evt.which === 13)) {
            resetMatches();
            scope.$digest();
            return;
          }

          evt.preventDefault();

          if (evt.which === 40) {
            scope.activeIdx = (scope.activeIdx + 1) % scope.matches.length;
            scope.$digest();
            makeSureVisible();

          } else if (evt.which === 38) {
            scope.activeIdx = (scope.activeIdx > 0 ? scope.activeIdx : scope.matches.length) - 1;
            scope.$digest();
            makeSureVisible();

          } else if (evt.which === 13 || evt.which === 9) {
            scope.$apply(function () {
              scope.select(scope.activeIdx);
            });

          } else if (evt.which === 27) {
            evt.stopPropagation();

            resetMatches();
            scope.$digest();
          }
        }); 

这篇关于角度ui-bootstrap提前输入建议-滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！