Angular JS UI Bootstrap tabs (ui.bootstrap.tabs) заставляет страницу прокручивать/переходить на выбор

Выбор вкладок заставляет страницу прокручиваться случайным образом, например, при выборе вкладки можно прокручивать страницу почти до самого верха, тогда мне придется прокручивать вниз, чтобы увидеть содержимое вкладки, если я выберу другую вкладку прокрутки страницы еще раз.

Содержимое вкладки имеет размер переменной, у кого больше элементов, чем у других, поэтому они, разумеется, разной высоты, но я не уверен, является ли это причиной случайной прокрутки страницы.

Я попробовал несколько jquery, чтобы отключить действия по умолчанию для ссылок без везения.

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

Другим решением, которое является уродливым, является то, что я завернул tabset в div и установил высоту на div

<div id="profile-nav-tabs" style="
 height:500px;
 overflow-y: auto;
 overflow-x:hidden
 ">
 <tabset justified="true">
 <tab heading="{{::strings.profile}}">
 
 
 </tab>
 .... more tabs
 </tabset>
</div>
1 ответ

Я столкнулся с той же проблемой. После отслеживания кода я считаю, что это ошибка директивы tabset.

Решение (шаг за шагом):

  • Изменить tabset.html, удалить [ng-class="{active: tab.active}"]
  • Изменить [tab] директиву scope.$watch('active').
  • Используйте функцию 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');
     }
    });

licensed under cc by-sa 3.0 with attribution.