Bootstraphttp://http://angular-ui.github.io/bootstrap/Bootstraphttp://getbootstrap.com/【概要】AngularJSで簡単にモーダルを表示できるプラグインがあったので実装方法についてまとめてみました。ng-click="ok()">OK</button></div>AngularJSを使った普通の画面を用意します。作成した画面内ではコントローラの指定はしなくて良いです。CSSやJSなどは呼び出し元の画面で参照させるようにします。Bootstrap、Bootstrapの参照も基の画面で定義してください。importimportModules);u.bootstrapをインポートします。[コントローラ]モーダル画面用のコントローラを作成します。]);$modalInstanceはモーダル画面用のオブジェクトです。今回のサンプルではOKボタンを押した後に閉じるようにしています。modalParamは各画面から必要なパラメータを受け取るためのオブジェクトです。モーダルのヘッダー(modalParam.modalHeader)、ボディ(modalParam.modalBody)、OKボタンクリック時の挙動(modalParam.modalokFunc)を各画面で変えられるようにしています。[サービス]今回のサンプルではモーダル画面表示をサービスとして実装しています。]);$modalがモーダルを開くためのオブジェクトになります。open関数ではモーダルが開きます。templateUrlには作成したモーダル画面用のHTMLを指定します。controllerにはモーダル画面用のコントローラを指定します。backdropにtrueを指定するとモーダル外をクリックでウィンドウがクローズされます。今回はクローズさせたくないのでfalseを指定します。resolveにはコントローラ内で独自の変数を扱うためのプロパティです。今回はモーダル画面のヘッダなどを各画面から指定できるようにします。同名のオブジェクトを返却するようにしています。resolveを指定することによりコントローラ内で同名のオブジェクトをインジェクションすることができます。\r\nサンプルでは改行されるようにしています。});呼び出し元では作成したサービスから関数を呼び出します。modalParamに必要なプロパティを指定します。指定したパラメータがサービス内の$modalのresolveに渡される↓resolveがコントローラのパラメータとしてインジェクションされると言う流れコントローラで使用できるようになります。【作成した画面】ヘッダー、ボディが表示されていることがわかります。OKボタンを押すと・・・アラートが表示され、アラートを閉じると同時にモーダルもクローズされます。簡単にモーダル画面を表示することができました。非常にカスタマイズしやすいと思います。Bootstrapはモーダル以外にもあるので、Bootstrapを使っているのであれば公式サイトのサンプルを眺めて見るといいかもしれません。月別アーカイブはてなブログをはじめよう!gloryofさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。