Bàn phím Bootstrap với AngularJS

Question

Tôi gặp sự cố khi sử dụng các tab bootstrap trong 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> 

Vấn đề là khi tôi chọn một tab ví dụ Home hoặc hồ sơ, tôi đang chuyển hướng đến/home hay/profile url thay vì hiển thị nội dung của tab chính nó.

Tôi có cảm giác rằng điều này có thể bằng cách nào đó đạt được bằng chỉ thị và ngăn chuyển hướng đến trang chủ hoặc tiểu sử, thay vào đó hiển thị nội dung tab.

Answer 1

Bạn có thể thử bằng cách sử dụng các thành phần giao diện người dùng bootstrap góc nằm ở đây, http://angular-ui.github.io/bootstrap/

Answer 2

Chỉ có thể giúp bạn xử lý nó.

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

thay href với data-target.

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

Answer 4

mã này sẽ giải quyết vấn đề khi sử dụng 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>