AngularJS UI Bootstrap onglets qui prennent en charge le routage

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

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

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 très simple mais puissante)

D'accord avec L'utilisation de UI-Router qui suit les États et fonctionne très bien avec les vues imbriquées. En parlant en particulier de votre problème d'onglets Bootstrap, il existe une excellente implémentation qui exploite UI Router: UI-router Tabs

Vous pouvez passer vos propres paires de valeurs clés personnalisées dans la définition d'itinéraire et y parvenir. voici un bon exemple: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Si vous avez un itinéraire appelé paramètres et que vous voulez avoir des onglets dans cette page de paramètres, quelque chose comme ça 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>

Juste un petit ajout à la réponse acceptée: j'avais besoin de garder l'onglet actuel à la page refresh donc j'ai utilisé un commutateur comme ceci:

$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;
        }

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

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

• Onglets avec un ui-view, de sorte qu'il peut charger dynamiquement des modèles,
• mise à jour du routage dans L'URL
• définir l'état de l'historique
• lorsque vous naviguez directement vers un itinéraire avec une vue à onglets, l'onglet correct est marqué 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'
    }
})

Les onglets modèle (onglets.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>

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

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

Cela permet de pouvoir faire ce que vous voulez:

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