AngularUIという、AngularJSを使ったUI開発用モジュール群があります。
http://angular-ui.github.io/
https://github.com/angular-ui
その中の"UI Bootstrap"を使うと、BootstrapのModalをAngularJSっぽく簡単に使うことができました。
http://angular-ui.github.io/bootstrap/
ソースは以下のような感じになります。
http://jsfiddle.net/mamor/4KBWj/
上記でAngularJSの他に読み込んでいるcssとjsは
Bootstrap公式のcss
https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
ui-bootstrap-tpls.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js
です。また、Modalで使用するHTMLのテンプレートは、インラインではなく外部ファイルにすることもできました。
一つのモーダルを、ng-repeatで繰り返した全データで共用するのとか簡単に出来て楽だなーと思いました。
No comments:
Post a Comment