人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

AngularJSとBootstrapを共存させたいです。

Bootstrapのtabコンポーネントを使用するため、下記ページのコードのようにマークアップしています。
https://gist.github.com/hogesuke/2d4108d6b12b9cbe8069

しかし、この実装だとタブをクリックした際にアドレスのハッシュが変わってしまい、
AngularJSで設定しているルーティングから外れてしまいます。

Bootstrapのタブの切り替えをハッシュを用いない方法で行うことはできますでしょうか?

●質問者: hogesuke
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●300ポイント ベストアンサー

AngularJS 用に書かれた Bootstrap があるみたいです。

http://angular-ui.github.io/bootstrap/
↑ハッシュが効きません。Directives のメニューから Tabs を選んでください。

http://nekok.com/2014/02/angular-ui-bootstrap-tab/
こっちは、見なくても良いかな。

Angular の人たちが書いているということで、こちらの方が AngularJS 的には正当なやり方なのかな、という気がします。
その代わり、本家の更新とはタイムラグがあるのかも。


一方、本家の Bootstrap を AngularJS で使ってるっぽいものもありました。
http://subliminalsources.com/175/angularjs-bootstrap-components-tutorials-part-3-building-tabs-directive/

上のと同じやり方ですが、タブを切り替えるところだけを拾い出すと、こんな感じになるのかな、という。
http://www.grobmeier.de/bootstrap-tabs-with-angular-js-25112012.html



# すみません、AngularJS さっぱりです (´・ω・`)


hogesukeさんのコメント
ありがとうございます。 AngularJS用のものが作られているのですね。知りませんでした
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ