web-dev-qa-db-ja.com

Angular ui.bootstrap tabs with ui.router？

以下は、ui.routerを使用したui.bootstrapタブの初期実装です。

<tabset>
  <tab heading="Tab1" select="$state.go('home.tab1')">
    <div ui-view="forTab1"></div>
  </tab>
  <tab heading="Tab2" select="$state.go('home.tab2')">
    <div ui-view="forTab2"></div>
  </tab>
</tabset>

とてもシンプルで、ほとんど機能しますが、いくつかの問題があります。

まず、ブラウザにURLを入力しても機能しません。 「.../home/tab1」。私が想定している問題は、ui.routerが正しいビューにルーティングしている場合でも、そのビューのタブを選択する方法がわからないことです。

次に、別のページの状態にページを移動しようとすると、タブロジックに明らかなバグが発生します。タブセットが破棄されると、タブが1つずつ破棄されます。現在選択されているタブを破棄すると、タブセット全体ではなく、そのタブのみが破棄された場合と同じロジックが実行されるように見えます。これにより、まだ破棄されていない他のタブの1つが選択され、ui.routerがそのタブの状態になり、ページを離れることができなくなります。 （おそらく修正は、タブセットを破棄しても、破棄プロセス中にタブが選択されないようにすることです。）

第3に、一部のタブビューは複雑で、構築中に多くのサーバーヒットが発生する場合があります。あるタブから別のタブに切り替えるたびにそれらを破棄して再作成したくありません。タブが最初に選択されたときにタブビューを作成し、ページを離れるまで保持したいのですが。以前に表示したタブを選択すると、再作成するのではなく、再び表示するだけです。

だから、もっと複雑で洗練されたものが必要なようですが、何ですか？提案を事前に感謝します。

更新：ui.router FAQは、タブの実装方法について質問があることがわかりました。これは、有望に見える "extras"パッケージを指しています。うまくいけば、ui.bootstrapと統合する方法がありますタブ http://christopherthielen.github.io/ui-router-extras/#/sticky

更新：これは、はるかにうまく機能するが、まだ正しくない2つの実装です。最初のものはui.bootstrapタブを使用します：

<tabset>
  <tab heading="Products" ui-sref=".products" active="$state.includes('home.products')"></tab>
  <tab heading="Users" ui-sref=".users" active="$state.includes('home.users')"></tab>
</tabset>
<div ui-view="home.products" ng-show="$state.includes('home.products')"></div>
<div ui-view="home.users" ng-show="$state.includes('home.users')"></div>

2つ目は、Chris Thielenの付箋タブの例のtop.htmlに基づいています。

<div class="navbar navbar-default navbar-static-top" role="navigation">
  <ul class="nav navbar-nav">
    <li ng-class="{active: $state.includes('home.products')}" ><a ui-sref="home.products">Products</a></li>
    <li ng-class="{active: $state.includes('home.users')}" ><a ui-sref="home.users">Users</a></li>
  </ul>
</div>
<div class="tabcontent well-lg" ui-view="home.products" ng-show="$state.includes('home.products')" class="col-sm-6"></div>
<div class="tabcontent well-lg" ui-view="home.users"    ng-show="$state.includes('home.users')"    class="col-sm-6"></div>

これらはどちらも、上記の最初の2つの問題を回避します。URL経由でタブに移動しても機能し、タブをトリガーせずにページを離れることができます（おそらく「select =」を使用していないため）。

ただし、まだ問題があり、両方のバージョンで発生します。 home.usersテンプレートにはui-gridがあり、そのタブが選択されているページに最初に移動した場合、グリッドは空です。クライアントがサーバーからグリッドのデータを要求しているのを確認できますが、表示されません。他のタブに移動して戻ってくると、データが表示されます（再フェッチした後）。さらに悪いことに、これはhome.usersの状態をスティッキーにすることができないことを意味します。これは、データが表示されないモードでスタックするためです。

angularjstabsangular-ui-routerangular-ui-bootstrap
12
Franz Amador

最も簡単な方法は、すてきなui-bootstrapディレクティブをすべて無視して、CSSを利用することです。その後、非常に単純なものになる可能性があります。

<ul class="nav nav-tabs">
    <li ui-sref=".state1" ui-sref-active="active"><a>State 1</a></li>
    <li ng-repeat="type in viewModel.types"
        ui-sref=".typeState({type:type})"
        ui-sref-active="active"><a>{{type}}</a></li>
</ul>

これにより、正しいアクティブ状態を維持しながら、タブの外観が得られます。 <tab-header>ディレクティブを使用する際の問題は、ui-router $stateからアクティブ状態をきれいに初期化できないため、ページの読み込み時に複数のタブが強調表示されることです。

24
srlm

i router plus ui bootstrap tabs と宣言しているこのプロジェクトを見て、

Angular.js + Bootstrap 3 + UIルーターを使用してルートをサポートするばかばかしいタブペイン

私はまだ試していませんが、確かに有望に見えます。

5
ElliotPsyIT

ちょうど私のプロジェクトでこれをやった。これは、ルートがui.routerで配線されていることを前提としています。それが役に立てば幸い。

<uib-tabset active="active">

    <uib-tab index="0" ui-sref ="tab1" heading="Tab1"></uib-tab>

    <uib-tab index="1" ui-sref="tab2" heading="Tab2"></uib-tab>

</uib-tabset>
1
dlsdaviddls