ダイアログボックスを生成する - Modal
ダイアログボックスを生成するには、$uibModalサービスを利用します。ダイアログにはシンプルなテキストだけではなく、任意の要素を配置できますので、たとえばログインフォームやヘルプ情報、設定ダイアログなどに利用することもできます。
以下は、シンプルなアンケートダイアログの例です。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/modal.js"></script>
</head>
<body ng-controller="MyController">
<!-- （1）ダイアログの準備 -->
<script type="text/ng-template" id="modal.html">
<div class="modal-header">
<h3 class="modal-title">アンケート</h3>
</div>
<div class="modal-body">
<form>
<div>
<label for="name">氏名：</label><br />
<input type="text" id="name" ng-model="user.name" />
</div>
<div>
<label for="email">メールアドレス：</label><br />
<input type="text" id="email" ng-model="user.email" />
</div>
<div>
<label for="memo">ひとこと：</label><br />
<input type="text" id="memo" ng-model="user.memo" />
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">送信</button>
<button class="btn btn-warning" ng-click="cancel()">キャンセル</button>
</div>
</script>
<button class="btn btn-info" ng-click="open()">アンケートに答える</button>
</body>
</html>
angular.module('myApp', [ 'ui.bootstrap' ])
.controller('MyController', ['$scope', '$uibModal', function($scope, $uibModal) {
$scope.open = function () {
// （2）ダイアログを開く
var dialog = $uibModal.open({
animation: true,
templateUrl: 'modal.html',
// （3）ダイアログ上のボタンクリック時の挙動を定義
controller: ['$scope', '$uibModalInstance',
function ($scope, $uibModalInstance) {
$scope.ok = function () {
$uibModalInstance.close($scope.user);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('キャンセルされました。');
};
}],
// （5）モーダルのための設定
backdrop: 'static',
backdropClass: 'back'
});
// （4）ボタンクリック後の結果を受け取る
dialog.result.then(
// ［送信］ボタンで入力値をログ表示
function (user) {
console.log(user);
},
// ［キャンセル］ボタンでメッセージを表示
function (msg) {
console.log(msg);
});
};
}]);
.back {
width: 100%;
height: 100%;
background-color: gray;
}
まず、ダイアログの内容を、<script>要素で準備します（1）。テンプレートであることを識別できるよう、type属性には「text/ng-template」を、id属性に一意な名前を付与しておきます。
テンプレートは、一般的に
- ヘッダー領域（modal-header）
- コンテンツ領域（modal-body）
- フッター領域（modal-footer）
から構成されます。それぞれclass属性で指定してください。
用意したダイアログは、$uibModal.openメソッドで開きます（2）。引数には「パラメーター名: 値」のハッシュとして、ダイアログの挙動を指定できます。
| パラメーター名 | 概要 |
|---|---|
| templateUrl | ダイアログ本体（パス） |
| template | ダイアログ本体（文字列） |
| controller | コントローラー |
| constrollerAs | コントローラーの別名 |
| scope | ダイアログで利用するスコープ（デフォルトは$rootScope） |
| animation | ダイアログ表示時にアニメーションを有効にするか（デフォルトはtrue） |
| backdrop | 背景の処理 |
| backdropClass | 背景に適用するスタイル |
ほとんどが直観的に理解できるものばかりですが、以下に主なものをいくつか補足しておきます。
ダイアログの挙動を制御する
ダイアログボックス上に配置されたボタンなどの挙動は、コントローラー（controllerパラメーター）で表します（3）。この例であれば、［送信］［キャンセル］ボタンをクリックしたところで、$uibModalInstance.close／dismissメソッドでダイアログを閉じています。$uibModalではなく、$uibModalInstanceである点にも注意してください（$uibModalはダイアログそのものを生成するための、$uibModalInstanceは生成されたダイアログを操作するための、それぞれサービスです。openメソッドも、戻り値は$uibModalInstanceです）。
close／dismissは、いずれもダイアログを閉じるためのメソッドですが、一般的に前者はなにかしら処理を完了して閉じるために、後者はキャンセルの用途で利用します。
close／dismissメソッドの結果を受け取るには、$uibModalInstance.result.thenメソッドを利用してください（4）。第1引数はcloseメソッドの、第2引数はdismissメソッドの、それぞれ結果を受け取り処理するためのコールバック関数です。
モーダルダイアログとモードレスダイアログ
モーダルダイアログとは、ダイアログを開いている間は、呼び出し元のページを操作できなくなるダイアログのこと。一方、呼び出し元の操作を妨げないダイアログのことをモードレスダイアログと言います。
$uibModalサービスでモーダルダイアログを表すには、backdropパラメーターをstaticとしたうえで、backdropClassパラメーターでダイアログの背景を灰色とします（正しくは、backdropClassパラメーターは必須ではありませんが、一般的には無効であることを視覚的に表しておくのが望ましいでしょう（5））。
ちまみに、backdropパラメーターをtrue（デフォルト）とすることで、ダイアログは［送信］［キャンセル］ボタンをクリックする他、ダイアログの外側をクリックすることでも閉じることができるようになります。
