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


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

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

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

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2014/10/24 08:30:26
  • 終了:2014/10/25 14:14:51

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4594ベストアンサー獲得回数19332014/10/24 12:01:44

ポイント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

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません