Bootstrap Tabs mit AngularJS

Question

Ich habe ein Problem mit den Bootstrap-Registerkarten in AngularJS.

<div class="tab-container"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
     <li><a href="#profile" data-toggle="tab">Profile</a></li> 
     <li><a href="#messages" data-toggle="tab">Messages</a></li> 
    </ul> 
<div class="tab-content"> 
    <div class="tab-pane active cont" id="home"> 
     <h3 class="hthin">Basic Tabs</h3> 
     <p>This is an example of tabs </p> 
    </div> 

    <div class="tab-pane cont" id="profile"> 
     <h2>Typography</h2> 
     <p>This is just an example of content 
    </div> 

    <div class="tab-pane" id="messages">..sdfsdfsfsdf. 
    </div> 
    </div> 
</div> 

Das Problem ist, dass wenn ich eine Lasche zum Beispiel Heim oder Profil wählen, ich bin umgeleitet zu/home oder/profile url stattdessen den Inhalt der Registerkarte zeigt sich.

Ich habe das Gefühl, dass dies irgendwie mit einer Direktive erreicht werden kann und die Umleitung auf die Startseite oder das Profil der Seite verhindert, stattdessen zeigen Sie den Tab-Inhalt.

Answer 1

Sie könnten versuchen, die Winkel UI Bootstrap-Komponenten befindet sich hier verwendet wird, http://angular-ui.github.io/bootstrap/

Answer 2

Richtlinie kann Ihnen helfen, sie zu behandeln.

app.directive('showTab', function() { 
    return { 
     link: function (scope, element, attrs) { 
      element.click(function (e) { 
       e.preventDefault(); 
       jQuery(element).tab('show'); 
      }); 
     } 
    }; 
}); 

<a show-tab href="#tab_1"> 
    Tab 1 
</a> 

Source

Answer 3

href mit data-target ersetzen.

<li class="active"><a data-target="#home" data-toggle="tab" >Home</a></li> 

Answer 4

dieser Code wird das Problem lösen, während mit AngularJS

<div class="tabbable tabs-below" ng-init="selectedTab = 1;"> 
         <ul class="nav nav-tabs nav-justified"> 
          <li ng-class="{active: selectedTab == 1}"> 
           <a href="#" ng-click="selectedTab = 1;">Personal</a> 
          </li> 
          <li ng-class="{active: selectedTab == 2}"> 
           <a href="#" ng-click="selectedTab = 2;">Education</a> 
          </li> 
          <li ng-class="{active: selectedTab == 3}"> 
           <a href="#" ng-click="selectedTab = 3;">Contact</a> 
          </li> 
         </ul> 

         <div class="tab-content" ng-show="selectedTab == 1"> 
         1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
         </div> 

         <div class="tab-content" ng-show="selectedTab == 2"> 
         2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
         </div> 

         <div class="tab-content" ng-show="selectedTab == 3"> 
         3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
         </div> 
        </div>