web-dev-qa-db-fra.com

AngularJS UI Bootstrap Tabs prenant en charge le routage

Je voudrais utiliser AngularJS UI Bootstrap Tabs dans mon projet, mais j'en ai besoin pour prendre en charge le routage.

Par exemple:

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

Autant que je sache à partir du code source, les directives actuelles tabs et pane ne prennent pas en charge le routage.

Quel serait le meilleur moyen d'ajouter un routage?

angularjsangularjs-directiveangular-ui-bootstrapbootstrap-tabs
39
Misha Moroshko

Pour ajouter un routage, vous utilisez généralement une directive ng-view. Je ne suis pas sûr qu'il soit assez facile de modifier l'interface utilisateur angulaire pour prendre en charge ce que vous recherchez, mais voici un plunker indiquant approximativement ce que je pense que vous recherchez (ce n'est pas nécessairement la meilleure façon de le faire - J'espère que quelqu'un pourra vous donner une meilleure solution ou améliorer ce point)

39
Chris White

Utilisez data-target = "# tab1". A travaillé pour moi

16
Harish B

Cette réponse m'a vraiment aidé http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx (solution simple mais puissante )

5
tdecs

J'ai également cette exigence et je fais quelque chose de similaire à la réponse fournie par Chris, mais j'utilise aussi le routeur AngularUI , car ngRouter ne prend pas en charge les vues imbriquées et il est possible que vous ayez le contenu des onglets voir à l'intérieur d'une autre vue (je l'ai fait) et cela ne fonctionnera pas avec ng-view.

5
pcatre

Acceptez l’utilisation de UI-Router, qui permet de suivre les états et fonctionne parfaitement avec les vues imbriquées. En ce qui concerne plus particulièrement le problème des onglets Bootstrap, il existe une excellente implémentation qui exploite l'interface utilisateur du routeur: Onglets de l'interface utilisateur

2
Yves

vous pouvez passer vos propres paires de valeurs de clé personnalisées dans la définition de route et y parvenir. Voici un bon exemple: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes- Sur-URL-Parameters-And-Client-Side-Events.htm

2
user1319462

Si vous avez un itinéraire appelé paramètres et que vous souhaitez avoir des onglets dans cette page de paramètres, cela fonctionne.

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

juste un petit ajout à la réponse acceptée: J'avais besoin de garder l'onglet actuel lors de l'actualisation de la page, donc j'ai utilisé un commutateur comme celui-ci:

$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

J'ai des onglets avec le routage qui fonctionne de la manière suivante. 

Il est capable de faire tout ce que vous voulez à partir d'onglets dynamiques, et c'est en fait très simple.

  • Onglets avec un ui-view, afin qu'il puisse charger dynamiquement des modèles,
  • Mettre à jour le routage dans l'URL
  • Définir l'état de l'historique
  • Lorsque vous naviguez directement vers une route avec une vue à onglets, l'onglet correct est marqué comme suit: active.

Définir les onglets avec un paramètre dans votre routeur

.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'
    }
})

Le modèle d'onglets (tabs.html) est

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

Ce qui est associé à un contrôleur très simple pour obtenir l'onglet actif actuel:

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