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

【问题标题】：how to prevent key navigation to focus on hidden(with ng-hide) tabs?如何防止关键导航专注于隐藏（使用 ng-hide）选项卡？
【发布时间】：2016-08-03 12:03:47
【问题描述】：

我正在使用 angular 版本的 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，它演示了问题

【问题讨论】：

您是否尝试过使用 tabstrip 禁用功能禁用标签？

标签： angularjs kendo-ui kendo-tabstrip

【解决方案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

【讨论】：