Проблема с активной вкладкой по умолчанию с использованием AngularJS, UI Boostrap и UI Router

При использовании набора вкладок UI Boostrap вместе с вложенными липкими состояниями, созданными с помощью ui-router и ui-router-extras, у меня возникает проблема, когда при переходе к состоянию вкладки по URL-адресу выбирается первая вкладка вместе с правильной вкладкой. Он должен активировать только вкладку, состояние которой соответствует маршруту URL.

Вот как выглядит набор вкладок:

<div style="position:relative">
      <tabset>
        <tab heading="Dashboard" ui-sref="LMS.Dashboard" ui-sref-active="active"></tab>
        <tab heading="Modules" ui-sref="LMS.Modules" ui-sref-active="active"></tab>
        <tab heading="Messages" ui-sref="LMS.Messages" ui-sref-active="active"></tab>
        <tab heading="Settings" ui-sref="LMS.Settings" ui-sref-active="active"></tab>
      </tabset>
      <div ui-view="Dashboard" class="tab-content" ng-show="$state.includes('LMS.Dashboard')">
          <h2>Dashboard</h2>
          {{test}}
      </div>
      <div ui-view="Modules" class="tab-content" ng-show="$state.includes('LMS.Modules')">
          <h2>Modules</h2>
      </div>
      <div ui-view="Messages" class="tab-content" ng-show="$state.includes('LMS.Messages')">
          <h2>Messages</h2>
      </div>
      <div ui-view="Settings" class="tab-content" ng-show="$state.includes('LMS.Settings')">
          <h2>Settings</h2>
      </div>
    </div>

У меня есть плунжер здесь:

http://plnkr.co/edit/sQB58YKntDwNIUpAdLmT?p=preview

Чтобы увидеть проблему, выберите вкладку, отличную от «Панель инструментов», затем перезагрузите рамку «живого просмотра».

Другой способ — открыть его в окне, переключить вкладку и перезагрузить.


angularjs angular-ui-router angular-ui-bootstrap
person spongessuck    schedule 07.10.2014    source источник

Ответы (2)


arrow_upward
6
arrow_downward

У меня такая же проблема. Добавьте active="false", чтобы отключить поведение по умолчанию, и используйте ui-sref-active, чтобы добавить активный класс.

<tab ui-sref-active="active" active="false">

Изменить

Хотя этот метод, кажется, работает, он выдает ошибку, потому что false не может быть назначено.

Изменить 2

Комбинация ng-init с локальной переменной области видимости помогает.

<tab ui-sref-active="active" active="isActive" ng-init="isActive=false">

В вашем случае может быть проще просто добавить активную переменную для каждой вкладки. См. этот плункер: http://plnkr.co/edit/73lm068buZf851h47FVQ?p=preview

person ltfishie    schedule 04.01.2015
comment
Спасибо, @Itfishie. Хотя это немного хакерское решение, ваше решение Edit 2 работает отлично. Предположительно, это проблема с UI Bootstrap. Мои вкладки загружаются динамически, поэтому добавление активной переменной для каждой вкладки было бы беспорядочным; Ваш способ мне больше нравится! - person spongessuck; 22.01.2015

arrow_upward
2
arrow_downward

У меня было точно так же. После поиска while я решил, что «ценность», которую предлагает ui-bootstrap для вкладок, не стоит усилий. Моя простая ручная реализация:

    <ul class="nav nav-tabs">
        <li ng-class="{active:$state.current.name == 'properties.edit.basic'}"><a ui-sref="properties.edit.basic">Basic</a></li>
        <li ng-class="{active:$state.current.name == 'properties.edit.marketing'}"><a ui-sref="properties.edit.marketing">Marketing</a></li>
        <li ng-class="{active:$state.current.name == 'properties.edit.rooms'}"><a ui-sref="properties.edit.rooms">Rooms</a></li>
        <li ng-class="{active:$state.current.name == 'properties.edit.images'}"><a ui-sref="properties.edit.images">Images</a></li>
        <li ng-class="{active:$state.current.name == 'properties.edit.rates'}"><a ui-sref="properties.edit.rates">Rates</a></li>
        <li ng-class="{active:$state.current.name == 'properties.edit.availability'}"><a ui-sref="properties.edit.availability">Availability</a></li>
    </ul>
    <ui-view></ui-view>
person sparkyspider    schedule 31.08.2015
comment
Спасибо .. мне помогло - person Komal Singh; 14.06.2016