Angular JS UI Bootstrap选项卡(UI . Bootstrap .tabs)会导致页面在选择时滚动/

Question

选择选项卡会导致页面随机滚动，例如选择一个选项卡可以将页面滚动到顶部，然后我必须向下滚动才能看到选项卡的内容，如果我选择另一个选项卡，页面再次滚动。

标签的内容是可变大小的，有些比其他的有更多的元素，所以它们自然是不同的高度，但我不确定这是否是随机页面滚动的原因。

我尝试了一些jquery来禁用链接默认操作，但没有成功。

$(function () {
   $('body').on('click', 'a[ng-click="select()"]', function (event) {
      event.preventDefault();
   });
});

另一个丑陋的解决方案是我将标签集包装在div中并在div

上设置高度

<div class="col-md-12" id="profile-nav-tabs" style="
         height:500px;
         overflow-y: auto;
         overflow-x:hidden
         ">
        <tabset justified="true">
            <tab  heading="{{::strings.profile}}">
                <br />
                <div  ng-include="'tab-profile.php'"></div>
            </tab>
            .... more tabs
       </tabset>
</div>

Answer 1

我遇到了同样的问题。在跟踪代码后，我认为这是tabset指令的错误。

解决方案是(一步一步):

1. 修改tabset.html，删除[ng-class="{active: tab.active}"]
2. 修改[tab]指令的scope.$watch('active')处理器。

3. 使用angular.element的addClass和removeClass功能添加/删除active类

   link: function(scope, elm, attrs, tabsetCtrl, transclude) {
   scope.$watch('active', function(active) {
       /*if (active) {
         tabsetCtrl.select(scope);
       }*/
       var idx = tabsetCtrl.tabs.indexOf(scope);
       var elmPane = angular.element(elm[0]).parent().next().children()[idx]; //li->ul->div(tab-content)->div(tab-pane)
       if (active) {
           tabsetCtrl.select(scope);
           angular.element(elmPane).addClass('active');
       }
       else {
           angular.element(elmPane).removeClass('active');
       }
   });