J'utilise cet extrait de ICI. Cela semble correct, mais lorsque je clique sur un onglet, au lieu de modifier le contenu du corps (<a href="#tab2success" data-toggle="tab">), il redirige vers localhost: 9000 / # tab2success , qui n'existe pas. Comment y parvenir? Je veux juste qu'en cliquant sur l'onglet, cela va au contenu spécifique dans le corps. On dirait que href n'est pas la solution ici ...

 <div class="col-md-9">

      <div class="panel with-nav-tabs panel-success">
            <div class="panel-heading">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab1success" data-toggle="tab">Success 1</a></li>
                        <li><a href="#tab2success" data-toggle="tab">Success 2</a></li>
                        <li><a href="#tab3success" data-toggle="tab">Success 3</a></li>
                    </ul>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="tab1success">Success 1</div>
                    <div class="tab-pane fade" id="tab2success">Success 2</div>
                    <div class="tab-pane fade" id="tab3success">Success 3</div>
                </div>
            </div>

PD: J'utilise angularJS, donc s'il y a une directive ou quelque chose qui pourrait aider, c'est peut-être aussi une option valide.

EDIT: partie de la mise en œuvre de mon routeur. C'est juste une partie du code, car c'est trop long pour tout publier.

angular
    .module('Test', [ //setting a module
    'oc.lazyLoad',
    'ui.router',
    'ui.bootstrap',
    'angular-loading-bar'
  ])
    .config(['$stateProvider', '$urlRouterProvider', '$ocLazyLoadProvider', function ($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {

        $ocLazyLoadProvider.config({
            //$ocLazyLoad returns a promise that will be rejected when there is an error but if you set debug to true,                       //$ocLazyLoad will also log all errors to the console.

            debug: false,
            events: true,
        });

        // For any unmatched url, redirect to '/dashboard/home'
        $urlRouterProvider.otherwise('/dashboard/rank');

        // Now we set up the states
        $stateProvider
            .state('dashboard', { //parent view
                url: '/dashboard',
                templateUrl: 'views/dashboard/main.html',
1
Miguel Xoel Garcia 7 mars 2016 à 12:43

3 réponses

Meilleure réponse

C'est le comportement normal des href.

Pour résoudre votre problème, veuillez vous référer à cet article: Onglets de navigation en angulaire

Fondamentalement, il existe un indicateur qui contrôle la visibilité des onglets et un événement ng-click qui mettra à jour la valeur de l'indicateur.

Une fois la valeur du modèle (indicateur) mise à jour, il mettra automatiquement à jour la vue.

1
Sherlock 7 mars 2016 à 10:42

C'est exactement le comportement attendu de href - si vous ne fournissez pas une URL complète, il l'ajoutera à votre URL actuelle (je suppose que vous utilisez localhost: 9000 pendant le développement). Jetez un œil à ce lien qui explique comment l'utiliser correctement, en utilisant {{ Directive X1}}.

Pour résumer, vous devez utiliser le format "guidon" dans la directive ng-href:

 <a ng-href="{{/#tab2success}}" data-toggle="tab">
0
millerbr 7 mars 2016 à 09:49

Il n'y a aucun besoin de code angulaire ou de complications excessives. Il vous manque juste le fichier bootstrap.js qui gère les onglets.

Assurez-vous que vous utilisez les classes correctes du balisage de l'onglet, importez le fichier JS à la fin du body de votre document, et c'est tout.

Vous pouvez en savoir plus sur les onglets Bootstrap, le balisage et leur fonctionnement dans la documentation officielle Bootstrap. .

0
Johnny Kutnowski 7 mars 2016 à 10:04