キーナビゲーションが非表示（非表示）タブに集中するのを防ぐ方法を教えてください。

Question

私はタブストリップのタブの私のユースケースの一部でkendoui tabstripウィジェット

の角度バージョンで働いて、最初はユーザーがドロップダウンから特定のオプションを選択した場合のみ、隠されたと見えるようになっています

<div class="wrap"> 
    <div id="tabstrip" kendo-tab-strip="tabstrip"> 
    <ul> 
     <li class="k-state-active">Tab 1</li> 
     <li ng-show="tabToHide!=='hide-second' && tabToHide!=='hide-second-and-third'">Tab 2</li> 
     <li ng-show="tabToHide!=='hide-third' && tabToHide!=='hide-second-and-third'">Tab 3</li> 
     <li>Tab 4</li> 
    </ul> 

    <div> 
     Tab one content. 
    </div> 
    <div ng-show="tabToHide!=='hide-second && tabToHide!=='hide-second-and-third''"> 
     Tab two content. 
    </div> 
    <div ng-show="tabToHide!=='hide-third' && tabToHide!=='hide-second-and-third'"> 
     Tab three content. 
    </div> 
    <div> 
     Tab 444 content. 
    </div>  
    </div> 

    <select ng-model="tabToHide"> 
    <option>show-all</option> 
    <option>hide-second</option> 
    <option>hide-third</option> 
    <option>hide-second-and-third</option> 
    </select> 
</div> 

私の問題矢印キーでタブをナビゲートすると、「目に見えない」タブにフォーカスが当てられます。 （タブ1がアクティブで、タブ2が隠れているときに右にナビゲートしようとすると、タブ3を開くために2回クリックする必要があります）

表示可能なタブのみをフォーカス可能にするにはどうすればいいですか？ここ

おかげ

は私がこれまでに発見した溶液/回避策の問題

Answer 1

種類をdemosnstartesことplnkrです。私は、この理想的ではない認める：ここ

app.controller("myCtrl", function($compile, $scope, $timeout, moveVisibleTabSvc) { 

    $scope.tabToHide = 'hide-second'; 
    $scope.tabStripOptions = { 
     animation: false, 
     activate: function(e) { 

     moveVisibleTabSvc.checkIfHidden($(e.item), $scope.tabstrip); 
     } 
    } 
    }).service('moveVisibleTabSvc',function moveVisibleTabSvc(){ 
     var prevItem;//for find direction 
     function findNextVisible(hidden){ 
      var nxt = hidden.next(); 
      return nxt.is(':visible')?nxt:findNextVisible(nxt); 
     } 
     function findPrevVisible(hidden){ 
      var prv = hidden.prev(); 
      return prv.is(':visible')?prv:findPrevVisible(prv); 
     }  
     function direction(curItem){ 

      return curItem.index() > prevItem.index() ?'right':'left'; 

     } 
     function moveToNextVisible(hidden) {   
      return direction(hidden) ==='right' ? findNextVisible(hidden) : findPrevVisible(hidden);   
     } 
     function checkIfHidden(item, tabstrip){ 
      //if the first is hidden 
      if(!prevItem){prevItem = item} 

      var hidden = item; 
      if(item.hasClass('ng-hide')) { 
       var tabToSelect = moveToNextVisible(hidden);    
       if(tabToSelect.length) { 

        tabstrip.select(tabToSelect); 
       } 
      } 
      prevItem = tabToSelect || item; 
     } 

     this.checkIfHidden = checkIfHidden; 

    }) 

はplnkr