angularjs - 如何防止关键导航专注于隐藏（使用 ng-hide）选项卡？

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）

如何使仅可见的选项卡具有焦点？

谢谢

这是演示问题的plnkr

Answer 1

到目前为止我发现的一种解决方案/解决方法。我承认这并不理想：

    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