webentwicklung-frage-antwort-db.com.de

AngularJS UI Bootstrap-Registerkarten, die das Routing unterstützen

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

Zum Beispiel:

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

Soweit ich dem Quellcode entnehmen kann, unterstützen die aktuellen Anweisungen tabs und pane kein Routing.

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

39
Misha Moroshko

Um Routing hinzuzufügen, verwenden Sie normalerweise eine ng-view-Direktive. Ich bin nicht sicher, dass es einfach ist, die eckige Benutzeroberfläche zu ändern, um das zu unterstützen, wonach Sie suchen, aber hier ist ein Plunker es zeigt ungefähr, was ich denke, Sie suchen (es ist nicht notwendigerweise die beste Art, es zu tun - hoffentlich kann dir jemand eine bessere Lösung geben oder dies verbessern)

39
Chris White

Verwenden Sie data-target = "# tab1". Arbeitete für mich

16
Harish B

Diese Antwort hat mir sehr 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.) )

5
tdecs

Ich habe auch diese Anforderung und mache etwas Ähnliches wie die Antwort von Chris, aber ich benutze auch AngularUI router , weil ngRouter keine verschachtelten Ansichten unterstützt und es möglich ist, dass Sie die Tabs-Inhalte haben view inside einer anderen view (ich habe es getan) und das funktioniert nicht mit ng-view.

5
pcatre

Stimmen Sie der Verwendung des UI-Routers zu, der den Status verfolgt und mit verschachtelten Ansichten funktioniert. Gerade beim Thema Bootstrap-Tabs gibt es eine großartige Implementierung, die den UI-Router nutzt: UI-Router-Tabs

2
Yves

sie können in der Routendefinition Ihre eigenen benutzerdefinierten Schlüsselwertpaare übergeben. Dies ist ein gutes Beispiel: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes) -Onto-URL-Parameters-And-Client-Side-Events.htm

2
user1319462

Wenn Sie über eine Route mit dem Namen Einstellungen verfügen und Registerkarten auf dieser Einstellungsseite haben möchten, funktioniert etwas wie das.

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

nur ein kleiner Beitrag zur akzeptierten Antwort: Ich musste die aktuelle Registerkarte bei der Seitenaktualisierung beibehalten, also habe ich einen Schalter wie folgt verwendet:

$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;
        }
0
Razvan.432

Ich habe Registerkarten mit Routing auf folgende Weise erhalten. 

Es ist in der Lage, alles zu tun, was Sie von dynamischen Registerkarten erwarten, und es ist eigentlich sehr einfach.

  • Registerkarten mit einem ui-view, damit Vorlagen dynamisch geladen werden können,
  • Routing in URL aktualisieren
  • Historie einstellen
  • Wenn Sie direkt zu einer Route mit einer Registerkartenansicht navigieren, wird die richtige Registerkarte als active markiert.

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 Tabs-Vorlage (tabs.html) lautet

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

Welches mit einem sehr einfachen Controller gekoppelt ist, um die aktuell aktive Registerkarte zu erhalten:

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