CodeZine(コードジン)

特集ページ一覧

UI BootstrapでリッチなパネルUIを実装しよう ~ タブパネルからダイアログ、アコーディオンパネルまで

AngularJSアプリ開発を支援する便利モジュール(6)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/12/09 14:00

目次

ダイアログボックスを生成する - Modal

 ダイアログボックスを生成するには、$uibModalサービスを利用します。ダイアログにはシンプルなテキストだけではなく、任意の要素を配置できますので、たとえばログインフォームやヘルプ情報、設定ダイアログなどに利用することもできます。

[アンケートにこたえる]ボタンを押すと、ダイアログを表示
[アンケートにこたえる]ボタンを押すと、ダイアログを表示

 以下は、シンプルなアンケートダイアログの例です。

リスト3 modal.html
<!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>
リスト4 modal.js
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);
        });
    };
  }]);
リスト5 modal.css
.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)。引数には「パラメーター名: 値」のハッシュとして、ダイアログの挙動を指定できます。

$uibModal.openメソッドのパラメーター
パラメーター名 概要
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(デフォルト)とすることで、ダイアログは[送信][キャンセル]ボタンをクリックする他、ダイアログの外側をクリックすることでも閉じることができるようになります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:AngularJSアプリ開発を支援する便利モジュール

もっと読む

著者プロフィール

  • WINGSプロジェクト(ウイングスプロジェクト)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5