angularjs – Angular JS UI Bootstrap选项卡(ui.bootstrap.tabs

发布时间：2020-12-17 08:47:37 所属栏目：安全来源：网络整理

导读：选择选项卡会导致页面随机滚动,例如选择选项卡可以将页面几乎一直滚动到顶部,然后我必须向下滚动才能看到选项卡的内容,如果我选择另一个选项卡页面再次滚动. 标签的内容大小可变,有些元素比其他元素多,所以它们自然具有不同的高度,但我不确定这是否是随机页

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

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

我尝试了一些jquery来禁用链接默认操作而没有运气.

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

另一个丑陋的解决方案是我将tabset包装在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>

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

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

>修改tabset.html,删除[ng-class =“{active：tab.active}”]
>修改[tab]指令的范围.$watch(‘active’)的处理程序.
>使用angular.element的addClass和removeClass函数添加/删除活动类.

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');
    }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!