AngularJS UI Bootstrap-Registerkarten, die Routing unterstützen

Question

Ich möchte AngularJS UI Bootstrap Tabs in meinem Projekt verwenden, aber ich brauche es, um Routing zu unterstützen.

Zum Beispiel:

Tab   URL 
-------------------- 
Jobs  /jobs 
Invoices /invoices 
Payments /payments 

Soweit ich aus dem Quellcode sagen kann, die aktuellen tabs und pane Richtlinien nicht Routing unterstützt.

Was wäre der beste Weg, Routing hinzuzufügen?

Answer 1

Zum Hinzufügen von Routing verwenden Sie in der Regel eine ng-view-Direktive. Ich bin mir nicht sicher, ob es einfach genug ist, angular UI zu modifizieren, um das zu unterstützen, wonach du suchst, aber here's a plunker zeigt ungefähr, was ich denke, wonach du suchst (es ist nicht unbedingt die beste Art, es zu tun - hoffentlich kann dir jemand eine geben bessere Lösung oder verbessern auf diese)

Answer 2

diese aught der Lage sein, zu tun, was Sie wollen:

https://github.com/angular-ui/ui-router

Answer 3

Sie Ihre eigenen benutzerdefinierten Schlüsselwert-Paare in der Routendefinition passieren könnte und dies zu erreichen. hier ist ein gutes Beispiel: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Answer 4

ich auch diese Anforderung habe, und ich bin etwas Ähnliches wie die Antwort von Chris zur Verfügung gestellt zu tun, aber ich bin auch mit AngularUI router, weil ngRouter nicht verschachtelten Ansichten nicht unterstützt und es ist möglich, Sie haben die Tabs Content View in einer anderen Ansicht (ich tat) und das wird nicht mit ng-View arbeiten.

Answer 5

nur eine kleine Add Antwort akzeptiert: i benötigt, um die aktuelle Registerkarte auf Aktualisierung der Seite zu halten, so benutzte ich einen Schalter wie folgt aus:

$scope.tabs = [ 
      { link : '#/furnizori', label : 'Furnizori' }, 
      { link : '#/total', label : 'Total' }, 
      { link : '#/clienti', label : 'Clienti' }, 
      { link : '#/centralizator', label : 'Centralizator' }, 
      { link : '#/optiuni', label : 'Optiuni' } 
     ]; 

     switch ($location.path()) { 
      case '/furnizori': 
       $scope.selectedTab = $scope.tabs[0]; 
       break; 

      case '/total': 
       $scope.selectedTab = $scope.tabs[1]; 
       break; 

      case '/clienti': 
       $scope.selectedTab = $scope.tabs[2]; 
       break; 

      case '/centralizator': 
       $scope.selectedTab = $scope.tabs[3]; 
       break; 

      case '/optiuni': 
       $scope.selectedTab = $scope.tabs[4]; 
       break; 

      default: 
       $scope.selectedTab = $scope.tabs[0]; 
       break; 
     } 

Answer 6

mit dem Einsatz von UI-Router Agree die Zustände verfolgt und funktioniert hervorragend mit verschachtelten Ansichten. Spricht besonders Ihren Bootstrap Tabs Problem gibt es eine große Implementierung, die UI-Router nutzt: UI-Router Tabs

Answer 7

Diese Antwort hat mir wirklich geholfen http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx (sehr einfache, aber leistungsfähige Lösung)

Answer 8

Verwendung daten target = „# tab1“. Arbeitete für mich

Answer 9

Wenn Sie eine Route namens Einstellungen haben und Sie auf dieser Einstellungsseite Registerkarten haben möchten, funktioniert so etwas.

<div class="right-side" align="center"> 
    <div class="settings-body"> 
     <ul class="nav nav-tabs"> 
      <li class="active"><a data-toggle="tab" href="#!/settings#private_email">Private email</a></li> 
      <li><a data-toggle="tab" href="#!/settings#signature">Signature</a></li> 
      <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
     </ul> 

     <div class="tab-content"> 
      <div id="private_email" class="tab-pane fade in active"> 
      <div class="row" ng-controller="SettingsController"> 
       <div> 
        <button class="btn btn-primary" ng-click="activatePrivateEmail()">Activate email</button> 
        <button class="btn btn-danger">Deactivate email</button> 
       </div> 
      </div> 
      </div> 
      <div id="signature" class="tab-pane fade"> 
       <textarea ui-tinymce="tinymceOptions" ng-model="signature"></textarea> 
       <div class="send-btn"> 
       <button name="send" ng-click="" class="btn btn-primary">Save signature</button> 
       </div> 
      </div> 
      <div id="menu2" class="tab-pane fade"> 
      <h3>Menu 2</h3> 
      <p>Some content in menu 2.</p> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 10

Ich habe Tabs mit Routing die folgende Art und Weise zu arbeiten.

Es ist in der Lage, alles, was Sie wollen, von dynamischen Tabs, und es ist eigentlich sehr einfach.

• Tabs mit einem ui-view, so dass es dynamisch Vorlagen laden kann,
• Update-Routing in URL
• Sets Geschichte Zustand
• Wenn direkt mit einer Registerkartenansicht auf eine Route navigieren, die richtigen Registerkarte markiert als active.

---

Definieren Sie die Registerkarten mit einem Parameter in Ihrem Router

.state('app.tabs', { 
    url   : '/tabs', 
    template : template/tabs.html, 
}) 
.state('app.tabs.tab1', { 
    url   : '/tab1', 
    templateUrl : 'template/tab1.html', 
    params  : { 
     tab   : 'tab1' 
    } 
}) 
.state('app.visitors.browser.analytics', { 
    url   : '/tab1', 
    templateUrl : 'template/tab2.html', 
    params  : { 
     tab   : 'tab2' 
    } 
}) 

Die Registerkarten Vorlage (tabs.html) ist

<div ng-controller="TabCtrl as $tabs"> 
    <uib-tabset active="$tabs.activeTab"> 
     <uib-tab heading="This is tab 1" index="'tab1'" ui-sref="app.tabs.tab1"></uib-tab> 
     <uib-tab heading="This is tab 2" index="'tab2'" ui-sref="app.tabs.tab2"></uib-tab> 
    </uib-tabset> 
    <div ui-view></div> 
</div> 

, die mit einem sehr einfachen Controller gepaart ist für Erhalten der aktuellen aktiven Registerkarte:

app.controller('TabCtrl', function($stateParams) { 
    this.activeTab = $stateParams.tab; 
})