如何觸發點擊焦點？

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焦點下拉？

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還不太瞭解。