Question

如您所知使用Boostrap下拉组件，您无法通过按键盘字母选择元素。所以我使用以下代码使用指令

myApp.directive('keyLetterPressed', function ($timeout) {
   return function (scope, element, attrs) {
    element.bind("keydown keypress", function (event) {

            var target = $(event.target);
            $(target).trigger('focus');

    });
   };
});

但这不完整，实际上是行不通，只是你可以告诉我我如何去列出具有相同字母的元素？另外我必须把这个指令放在UI元素中吗？因为实际上我在li

上使用它

<li ng-repeat="v in values" keyLetterPressed>{{v.name}}</li>

Answer 1

另一个答案就是这个，将指令添加到ul元素

 app.directive('booststrapDropdown',
 function () {
  return {
      restrict: 'A',
      link: function (scope, element, attr) {
          console.log('linked');
          element.parent().bind('keypress', function (e) {
              children = element.children();
              children.removeClass("active");
              for (var i = 0; i < children.length; i++) {
                  var letter = String.fromCharCode(e.which);
                  var charat = children[i].textContent.replace(/\s+/, '').charAt(0);
                  if (charat === letter) {
                      children[i].className += " active";
                      element[0].scrollTop = children[i].offsetTop;
                  }
              }
          });
      }
  };
  });



  <div class="btn-group" dropdown>
    <button type="button" class="btn btn-primary dropdown-toggle" 
            dropdown-toggle>
      Button dropdown <span class="caret"></span>
    </button>
    <ul booststrap-dropdown class="dropdown-menu scrollable-menu" role="menu" >
      <li ng-repeat="v in values">
        <a href="#">{{v.name}}</a>
      </li>
    </ul>
  </div>

Answer 2

这可能是一个部分答案，因为你可以看到它只需要一些调整。

选中此jsfiddle

以下是代码：

    myApp.directive('keypressEvents',

    function ($document, $rootScope) {
    return {
    restrict: 'A',
    link: function (scope, element, attr) {
        console.log('linked');
        $document.bind('keypress', function (e) {
        $rootScope.$broadcast('keypress', e,  String.fromCharCode(e.which)); 
        var letter = String.fromCharCode(e.which);

        var target = e.target;

        var charat = element[0].textContent.charAt(0);

        if(charat === letter){ 
                element.addClass("red");
        }
        });
    }
}
});

向上有使用的指令，它只是在keypressed上绑定最后设置了使用相同的第一个字母找到的元素的类只是我需要把重点放在这个而不只是改变类

  <div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Dropup
   <span class="caret"></span>
  </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <li keypress-events><a href="#">action</a></li> 
       <li keypress-events><a href="#">something else here</a></li> 
     </ul>
   </div>

我已将指令绑定在li元素上。（仅需要调试rootcope和brodcast消息）

Bootstrap下拉菜单中的键盘导航

2 个答案: