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


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

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

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

回答の条件
  • 1人2回まで
  • 登録:
  • 終了:2014/10/25 14:14:51
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

ポイント300pt

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 さっぱりです (´・ω・`)

id:hogesuke_1

ありがとうございます。
AngularJS用のものが作られているのですね。知りませんでした

2014/10/25 11:47:49

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません