如何触发点击焦点？

Question

看看：

http://plnkr.co/edit/lW0hNYXzyibLujgSxAzi?p=preview

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {

  $scope.status = {
    isopen: false
  };

  $scope.toggleDropdown = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.status.isopen = !$scope.status.isopen;
  };
});

Html:

 <div ng-controller="DropdownCtrl">
        <!-- Simple dropdown -->
        <div class="btn-group" dropdown keyboard-nav>
            <input id="simple-btn-keyboard-nav" dropdown-toggle>
            <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
                <li role="menuitem"><a href="#">Action</a></li>
                <li role="menuitem"><a href="#">Another action</a></li>
                <li role="menuitem"><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li role="menuitem"><a href="#">Separated link</a></li>
            </ul>
        </div>
    </div>

如您所见，下拉菜单仅在单击鼠标时切换，但在使用 tab 获得焦点时，甚至在之后按 enter 键时都不会。

我怎样才能让它也可以通过 TAB 触发焦点下拉菜单？

Answer 1

您离得不远，但您的 HTML 模板缺少一些元素。将其更改为：

<div class="btn-group" dropdown keyboard-nav is-open="status.isopen">
  <input id="simple-btn-keyboard-nav" ng-focus="toggleDropdown($event)" dropdown-toggle>
  <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
    <li role="menuitem"><a href="#">Action</a></li>
    <li role="menuitem"><a href="#">Another action</a></li>
    <li role="menuitem"><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li role="menuitem"><a href="#">Separated link</a></li>
  </ul>
</div>

您缺少 is-open 标志。我添加了一个 ng-focus 事件来切换您的下拉菜单。

现在你必须找到一种方法来防止 click 和 focus 事件相互冲突。我没有花时间解决这个问题，因为我还不太了解你的 UI。

如何触发点击焦点？

How to trigger click on focus?

angularjs

angular-ui

angular-bootstrap