web-dev-qa-db-ja.com

AngularJS UI Bootstrapルーティングをサポートするタブ

プロジェクトで AngularJS UI Bootstrap Tabs を使用したいのですが、ルーティングをサポートするために必要です。

例えば：

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

ソースコードからわかる限り、現在のtabsおよびpaneディレクティブはルーティングをサポートしていません。

ルーティングを追加する最良の方法は何ですか？

angularjsangularjs-directiveangular-ui-bootstrapbootstrap-tabs
39
Misha Moroshko

ルーティングを追加するには、通常ng-viewディレクティブを使用します。あなたが探しているものをサポートするためにangular UIを変更するのに十分簡単かどうかはわかりませんが、 ここにプランカーがあります 私があなたが探していると思うものを大まかに示します（必ずしもそれを行うための最良の方法ではありません-誰かがあなたにもっと良い解決策を与えるか、これを改善できることを願っています）

39
Chris White

Data-target = "＃tab1"を使用します。私のために働いた

16
Harish B

この回答は本当に助けになりました http://odetocode.com/blogs/scott/archive/2014/04/14/deep-linking-a-tabbed-ui-with-angularjs.aspx （非常に簡単ですしかし強力なソリューション）

5
tdecs

また、この要件があり、Chrisが提供する答えと同様のことをしていますが、ngRouterはネストされたビューをサポートしていないため、 AngularUI router も使用しています。別のビュー内のタブコンテンツビュー（私がやった）、それはng-viewでは機能しません。

5
pcatre

状態を追跡し、ネストされたビューでうまく機能するUI-Routerの使用に同意します。特にBootstrapタブの問題について言えば、UIルーターを活用する優れた実装があります： I-Router Tabs

2
Yves

ルート定義で独自のカスタムキーと値のペアを渡し、これを実現できます。ここに良い例があります： http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

2
user1319462

設定と呼ばれるルートがあり、その設定ページにタブを追加したい場合は、次のようにします。

<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>
1
Sebastian Brestin

受け入れられた答えへの小さな追加：ページの更新時に現在のタブを保持する必要があるため、次のようなスイッチを使用しました：

$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;
        }
0
Razvan.432

次の方法でルーティングのタブを取得しました。

動的なタブから必要なことをすべて実行でき、実際には非常に簡単です。

  • ui-viewを持つタブ。これにより、テンプレートを動的にロードできます。
  • URLのルーティングを更新
  • 履歴状態を設定する
  • タブ付きビューでルートに直接移動すると、正しいタブはactiveとしてマークされます。

ルーターのパラメーターでタブを定義する

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

タブテンプレート（tabs.html）は

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

現在アクティブなタブを取得するための非常にシンプルなコントローラーとペアになっています：

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