Probleme mit der aktiven Registerkarte Standard mit AngularJS UI-Boostrap, und UI Router

Bei der Verwendung eines UI-Boostrap tabset zusammen mit verschachtelten sticky Staaten erstellt mit ui-router und ui-router-extras, ich habe ein Problem, wo navigieren Sie zu einer Registerkarte, die Staat über die URL wählen, wird die erste Registerkarte, die zusammen mit der richtigen Registerkarte. Es sollte nur aktivieren Sie die Registerkarte, deren Zustand mit der URL übereinstimmt route.

Hier ist, was die tabset aussieht:

<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>

Ich habe eine plunker hier:

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

Sehen Sie das Problem, wählen Sie eine Registerkarte aus anderen als 'Dashboard', laden Sie die "live view" - frame.

Ein anderer Weg ist, um es zu öffnen in einem Fenster wechseln Sie auf die Registerkarte laden.

InformationsquelleAutor spongessuck | 2014-10-07

6

Ich habe das gleiche Problem. Hinzufügen active="false" deaktivieren Sie Standard-Verhalten und mit ui-sref-aktiv " aktive Klasse.
```
<tab ui-sref-active="active" active="false">
```
Bearbeiten

Während diese Methode scheint zu arbeiten, es erzeugt Fehler, weil falsch ist, ist nicht belegbar.

Edit 2

Kombination von ng-init mit einem lokalen scope-variable scheint, den trick zu tun.
```
<tab ui-sref-active="active" active="isActive" ng-init="isActive=false">
```
In Ihrem Fall könnte es einfacher sein, fügen Sie einfach eine aktive variable für jede Registerkarte. Sehen Sie diese plunker:
http://plnkr.co/edit/73lm068buZf851h47FVQ?p=preview
- Danke, @Itfishie. Obwohl es ein bisschen hacky, dein Bearbeiten 2 Lösung funktioniert perfekt. Angeblich ist das ein Problem mit UI Bootstrap. Meine tabs werden dynamisch geladen, so das hinzufügen einer aktiven Variablen für jeden tab chaotisch; ich mag deine Methode besser!
- Erste Methode wirkte Wunder für mich, erraten Sie es behoben.
InformationsquelleAutor ltfishie

Ich hatte genau das gleiche. Nach der Suche für eine Weile, ich beschloss, den "Wert" ui-bootstrap bietet rund um tabs ist nicht der Mühe Wert. Meine einfache manuelle Durchführung:

    <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>

Danke.. Ihr geholfen, für mich

InformationsquelleAutor Spider

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.