AngularJS UI Bootstrap Các tab hỗ trợ định tuyến

Question

Tôi muốn sử dụng AngularJS UI Bootstrap Tabs trong dự án của mình, nhưng tôi cần nó để hỗ trợ định tuyến.

Ví dụ:

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

Theo như tôi có thể nói từ mã nguồn, hiện tại tabs và pane chỉ thị không hỗ trợ định tuyến.

Cách tốt nhất để thêm định tuyến là gì?

Answer 1

Để thêm định tuyến, bạn thường sử dụng chỉ thị ng-view. Tôi không chắc rằng nó đủ dễ dàng để sửa đổi giao diện người dùng góc để hỗ trợ những gì bạn đang tìm kiếm, nhưng here's a plunker cho thấy những gì tôi nghĩ bạn đang tìm kiếm (nó không nhất thiết là cách tốt nhất để làm nó - hy vọng ai đó có thể cung cấp cho bạn giải pháp tốt hơn hoặc cải thiện về vấn đề này)

Answer 2

chuyện này để có thể làm những gì bạn muốn:

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

Answer 3

bạn có thể chuyển các cặp giá trị key tùy chỉnh của riêng bạn trong định nghĩa tuyến đường và đạt được điều này. đây là một ví dụ điển hình: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Answer 4

Tôi cũng có yêu cầu này và tôi đang làm một cái gì đó tương tự như câu trả lời cung cấp bởi Chris, nhưng tôi cũng đang sử dụng AngularUI router, vì ngRouter không hỗ trợ xem lồng nhau và có thể bạn sẽ có chế độ xem nội dung tab bên trong một chế độ xem khác (tôi đã làm) và điều đó sẽ không hoạt động với chế độ xem ng.

Answer 5

chỉ là một add nhỏ để chấp nhận câu trả lời: i cần thiết để giữ các tab hiện tại refresh trang vì vậy tôi sử dụng một công tắc như thế này:

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

Answer 6

Đồng ý với việc sử dụng giao diện người dùng-Router mà theo dõi trạng thái và hoạt động tốt với các chế độ xem lồng nhau. Phát biểu đặc biệt là vấn đề tab Bootstrap của bạn có một thực hiện tuyệt vời mà thúc đẩy giao diện người dùng Router: UI-Router Tabs

Answer 7

Câu trả lời này thực sự giúp tôi http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx (giải pháp rất đơn giản nhưng mạnh mẽ)

Answer 8

Sử dụng dữ liệu-target = "# tab1". Làm việc cho tôi

Answer 9

Nếu bạn có một tuyến đường được gọi là cài đặt và bạn muốn có các tab trong trang cài đặt đó, một cái gì đó như thế này hoạt động.

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

Answer 10

Tôi đã nhận các tab có định tuyến hoạt động theo cách sau.

Nó có thể thực hiện mọi thứ bạn muốn từ các tab động và nó thực sự rất đơn giản.

• Tabs với một ui-view, vì vậy nó có thể tự động tải mẫu,
• Cập nhật định tuyến trong URL
• bang Set lịch sử
• Khi điều hướng trực tiếp đến một con đường với một cái nhìn tab, tab chính xác được đánh dấu là active.

---

Xác định các tab với một tham số trong router của bạn

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

Các tab mẫu (tabs.html) là

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

nào được ghép nối với một bộ điều khiển rất đơn giản cho nhận tab hoạt động hiện tại:

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