AngularJSで HTML5的なアラートウィンドウを表示する

JavaScript

手前の方にポップアップしてメッセージを伝え、ユーザーの了承を促すアラートウィンドウ。JavaScript標準の window.alertでは味気ないので、もっと HTML5的に表示してみる。

モーダルとだけ言うと日本ではあまり聞き慣れない言葉だが、ユーザーインターフェイス用語としてはかなり昔から存在する「モーダル・ダイアログボックス」を示す。ユーザーとの対話が終了するまで必ず画面の最も手前に居続け、表示されている間はその外にアクセスさせないようになる、よくあるダイアログボックスをいう。Web製作の現場ではポップアップと呼ばれることも多い。

JavaScriptの window.alertや Windows APIの MessageBox で表示されるメッセージウィンドウもモーダルの一種である。

AngularJSそのものはユーザーインターフェイスを提供しないのだが、Bootstrapを組み合わせていれば(関連記事: 見た目は Bootstrapなのに動きは AngularJSなサイトを作るにはBootstrapのモーダルを使って比較的簡単に HTML5的な見た目のアラートウィンドウを表示することができる。

AngularJSで Bootstrapのモーダルを使用するには、UI Bootstrapの $modal というサービスを使う。$modal.openを呼び出せば任意の HTMLをテンプレートとしてモーダルを開くことが出来、また scopeを渡すことによってスコープにアクセスさせることも可能だ。

モーダルの中身を表現するHTML(テンプレート)は別ファイルにしてもいいが、HTML内の適当な場所に

<script type="text/ng-template" id="ファイル名"> ... </script>
のようにして書いておくことも出来る。その場合、id属性で指定された架空のファイル名を使って $modal.openの templateUrl引数から参照される。

モーダルのテンプレート内では $close() と $dismiss() という関数がスコープに自動でセットされる。これらを呼び出すとモーダルは閉じられる。$close() はユーザーが「OK」「設定を保存」など肯定的な意味のアクションを起こした結果としてモーダルを閉じることを意味し、$dismiss() は「キャンセル」的な理由でモーダルを閉じることを意味する。下記のサンプルでは使用していないが、それぞれの関数には引数を渡すことができ、モーダルの呼び出し側にデータを引き渡せる。

動作の様子

サンプルソース

<html lang="ja" ng-app="MyApp">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
    <script language="javascript">
      angular.module("MyApp", ["ui.bootstrap"])
        .run(["$rootScope","$modal", function($scope, $modal) {
          $scope.name = "アケミホムラ";
          $scope.open = function() {
            $modal.open({templateUrl:"aisatsu.html", scope: $scope});
          };
        }]);
    </script>
    <title>シンプルなアラートメッセージを表示するモーダル</title>
  </head>
  <body>
    <div class="container">
      <h2>シンプルなアラートメッセージを表示するモーダル</h2>
      <div class="form-group">
        <label class="control-label">お名前</label>
        <div class="input-group">
          <input type="text" class="form-control" ng-model="name">
          <span class="input-group-btn">
            <button class="btn btn-warning" type="button" ng-click="open()">アイサツする</button>
          </span>
        </div>
      </div>
    </div>
    <!-- 以降、モーダルの中身 -->
    <script type="text/ng-template" id="aisatsu.html">
      <div class="modal-header">
        <button type="button" class="close" ng-click="$dismiss()" aria-hidden="true">×</button>
        <h3>アイサツ</h3>
      </div>
      <div class="modal-body">
        ドーモ。<strong>{{name}}</strong>=サン。ニンジャスレイヤーです。
      </div>
      <div class="modal-footer">
        <button class="btn btn-danger" ng-click="$close()">サツバツ!</button>
      </div>
    </script>
  </body>
</html>

同じカテゴリの記事

Angular.JSでselect要素にoptionをぶら下げる色々な方法 2014年3月29日
AngularJSで、時間のかかる通信の間にモーダルを使ってプログレスバーを表示する 2014年3月18日
HTML5アプリケーションでの、サーバとクライアントの時差について 2014年3月17日
AngularJSの $resourceを使って application/x-www-form-urlencoded 形式のリクエストを POSTする 2014年3月15日
AngularJSと UI Bootstrapで日付と時刻の入力をする 2014年3月14日

お勧めカテゴリ

英語でアニメ観ようず
なじみ深い日本製アニメの英語版DVDで、字幕と音声から英語を学びましょうという趣旨のシリーズ記事です。
ScalaのようでJavaだけど少しScalaなJSON API
Scalaと Spring Frameworkを使って REST的なJSON APIを実装してみましょう。
ドクジリアン柔術少女 すから☆ぱいそん
代表 嶋田大貴のブログです。写真は神仏に見せ金をはたらく罰当たりの図