指令 键盘上下键移动实现列表数据滚动

指令

angular.module('ui.directives').directive('uiKeydown', ['keypressHelper', function(keypressHelper){
  return {
    link: function (scope, elm, attrs) {
      keypressHelper('keydown', scope, elm, attrs);
    }
  };
}]);

注入的keypressHelper工厂

angular.module('ui.directives').factory('keypressHelper', ['$parse', function keypress($parse){
  var keysByCode = {
    8: 'backspace',
    9: 'tab',
    13: 'enter',
    27: 'esc',
    32: 'space',
    33: 'pageup',
    34: 'pagedown',
    35: 'end',
    36: 'home',
    37: 'left',
    38: 'up',
    39: 'right',
    40: 'down',
    45: 'insert',
    46: 'delete'
  };

  var capitaliseFirstLetter = function (string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
  };

  return function(mode, scope, elm, attrs) {keypressHelper('keydown', scope, elm, attrs);
    var params, combinations = [];
    params = scope.$eval(attrs['ui'+capitaliseFirstLetter(mode)]);

    // Prepare combinations for simple checking
    angular.forEach(params, function (v, k) {
      var combination, expression;
      expression = $parse(v);

      angular.forEach(k.split(' '), function(variation) {
        combination = {
          expression: expression,
          keys: {}
        };
        angular.forEach(variation.split('-'), function (value) {
          combination.keys[value] = true;
        });
        combinations.push(combination);
      });
    });

    // Check only matching of pressed keys one of the conditions
    elm.bind(mode, function (event) {
      // No need to do that inside the cycle
      var altPressed = event.metaKey || event.altKey;
      var ctrlPressed = event.ctrlKey;
      var shiftPressed = event.shiftKey;
      var keyCode = event.keyCode;

      // normalize keycodes
      if (mode === 'keypress' && !shiftPressed && keyCode >= 97 && keyCode <= 122) {
        keyCode = keyCode - 32;
      }

      // Iterate over prepared combinations
      angular.forEach(combinations, function (combination) {

        var mainKeyPressed = (combination.keys[keysByCode[event.keyCode]] || combination.keys[event.keyCode.toString()]) || false;

        var altRequired = combination.keys.alt || false;
        var ctrlRequired = combination.keys.ctrl || false;
        var shiftRequired = combination.keys.shift || false;

        if (
          mainKeyPressed &&
          ( altRequired == altPressed ) &&
          ( ctrlRequired == ctrlPressed ) &&
          ( shiftRequired == shiftPressed )
        ) {
          // Run the function
          scope.$apply(function () {
            combination.expression(scope, { '$event': event });
          });
        }
      });
    });
  };
}]);

使用方式

<div class="search-content" ui-keydown="{'up down': 'inputCodeTreatBlur()'}" id="treatInfoSearch">
            <table class="table table-striped">
                <tbody>
                <tr ng-repeat="treatInfo in treatInfoList"
                    ng-dblclick="selectTreatInfo()" ng-click="activeTreatInfo(treatInfo)"
                    ng-class="{'bg-selected-color': treatInfo==activateTreatInfo}">
                    <td>
                        {{::treatInfo.clinicItemName}}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

inputCodeTreatBlur()函数是实现列表滚动条移动

$scope.inputCodeTreatBlur = function () {
        var scope = angular.element("#treatInfoSearch").scope();
        if (scope.treatInfoList.length !== 0) {
            if (angular.equals(scope.activateTreatInfo, {})) {
                if (event.keyCode === 40) {
                    scope.activeTreatInfo(scope.treatInfoList[0]);
                    $("#treatInfoSearch").scrollTop(0);
                } else if (event.keyCode === 38) {
                    var treatInfo = scope.treatInfoList[scope.treatInfoList.length - 1];
                    scope.activeTreatInfo(treatInfo);
                    $("#treatInfoSearch").scrollTop(document.getElementById("treatInfoSearch").scrollHeight - document.getElementById("treatInfoSearch").offsetHeight + 5);
                }
                event.stopPropagation();
                event.preventDefault();
            }
        }
    };