AngularUI Bootstrapを使ったモーダル画面表示

【前提条件】

[環境]

AngularJS 1.2.5
AngularUI Bootstratp 0.10.0
Bootstrap 3.0.3

参考サイト

AngularJS
http://http://angularjs.org/

AngularUI Bootstrap
http://http://angular-ui.github.io/bootstrap/

Bootstrap
http://getbootstrap.com/

【概要】

AngularJSで簡単にモーダルを表示できる
プラグインがあったので実装方法についてまとめてみました。

【モーダル画面】

<div class="modal-header">
    <h3>{{modalHeader}}</h3>
</div>
<div class="modal-body">
    <span style="white-space: pre-line;">{{modalBody}}</span>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
</div>

AngularJSを使った普通の画面を用意します。

作成した画面内ではコントローラの指定はしなくて良いです。
CSSやJSなどは呼び出し元の画面で参照させるようにします。

AngularJS、AngularUI Bootstrap、Bootstrapの参照も
基の画面で定義してください。

【JavaScipt】

[インポート]

var importimportModules = [
    "ui.bootstrap"
];

var modalService = angular.module("modalService", importimportModules);

u.bootstrapをインポートします。

[コントローラ]

モーダル画面用のコントローラを作成します。

modalService.controller(
    "BasicModalController",
    [
        "$scope",
        "$modalInstance",
        "modalParam",
        function($scope, $modalInstance, modalParam) {

            $scope.modalHeader = modalParam.modalHeader;
            $scope.modalBody = modalParam.modalBody;

            $scope.ok = function() {
                modalParam.okFunc();

                $modalInstance.close();
            };
        }
    ]
);

$modalInstanceはモーダル画面用のオブジェクトです。
今回のサンプルではOKボタンを押した後に閉じるようにしています。

modalParamは各画面から必要なパラメータを受け取るためのオブジェクトです。
モーダルのヘッダー（modalParam.modalHeader）、ボディ（modalParam.modalBody）、
OKボタンクリック時の挙動（modalParam.modalokFunc）を
各画面で変えられるようにしています。

[サービス]

今回のサンプルではモーダル画面表示をサービスとして実装しています。

modalService.service(
    "ModalService",
    [
        "$modal",
        function($modal) {

            var openModal = function(modalParam) {
                $modal.open(
                    {
                        templateUrl : "common/basicModal.html",
                        controller : "BasicModalController",
                        backdrop : false,
                        resolve : {
                            modalParam : function () {
                                return modalParam;
                            }
                        }
                    }
                );
            };

            return {
                openModal : openModal
            };
        }
    ]
);

$modalがモーダルを開くためのオブジェクトになります。

open関数ではモーダルが開きます。

templateUrlには作成したモーダル画面用のHTMLを指定します。
controllerにはモーダル画面用のコントローラを指定します。

backdropにtrueを指定するとモーダル外を
クリックでウィンドウがクローズされます。
今回はクローズさせたくないのでfalseを指定します。

resolveにはコントローラ内で独自の変数を扱うためのプロパティです。
今回はモーダル画面のヘッダなどを各画面から指定できるようにします。
resolveにmodalParamと言う名前で関数を作成し、
同名のオブジェクトを返却するようにしています。

resolveを指定することによりコントローラ内で
同名のオブジェクトをインジェクションすることができます。

[呼び出し元]

    ModalService.openModal({
        modalHeader : "ヘッダーです",
        modalBody : "ボディです。\r\nサンプルでは改行されるようにしています。",
        okFunc : function () {
            alert("閉じます");
        }
    });

呼び出し元では作成したサービスから関数を呼び出します。
modalParamに必要なプロパティを指定します。

指定したパラメータがサービス内の$modalのresolveに渡される
↓
resolveがコントローラのパラメータとしてインジェクションされる

と言う流れコントローラで使用できるようになります。