AngularJSのui.bootstrapのモーダルで確認ダイアログ的なものを出す

単純にmodal呼び出すだけだと、非同期でサクサク後続処理も進んでしまうので、確認ダイアログっぽいものを出してユーザーの判断を待ってから、OKとキャンセルで後続処理を分岐したかった。ただそれだけの事に結構悩んでしまったのでメモ。

モーダル用のcontroller作成

Yeomanなら、yoコマンドでcontoroller作成。そしてViewも作成。

$ yo angular:controller modal-confirm

ソース

呼び出し側controller.coffee

$scope.save = ->
  deferred = $q.defer()
  $modal.open
    templateUrl: 'views/modal-confirm.html'
    controller: 'ModalConfirmCtrl'
    windowClass: 'modal-confirm row-fluid'
    scope: $scope
    resolve:
      params: ->
        foo: bar
  .result.then ( ->
    alert("ok")
    # OKの場合の処理
    # ・・・
    deferred.promise
  ), ->
    alert("dismiss")
    # キャンセル時の処理
    # ・・・
    deferred.promise

今回の例だと、特にモーダルで何も処理しないのでmodalのcontrollerは何もしてませんが、呼び出し元から何か情報をもらい、そして何かしら処理する、みたいな時にはresolveで指定して渡せばOK。

モーダルからのコールバックは、result.then で受け取って onclose と ondismiss の両方を記述できる。

modal-confirm.coffee

angular.module('app')
.controller 'ModalConfirmCtrl', ($scope, $q, params) ->
  modal_foo = params.foo

modal-confirm.html

<form class="form-horizontal" name="confirmForm">
  <div class="modal-header">
　  <h3>確認だぉ</h3>
  </div>

  <div class="modal-body">
    <div>
      <p>本当にいぃ？</p>
      <a class="btn btn-danger" type="button" ng-click="$close()">OKです！ビシッ(｀･ω･´)ゞ</a>
    </div>
  </div>

  <div class="modal-footer">
    <div class="btn-repeat-group">
      <a class="btn btn-default" type="button" ng-click="$dismiss()">キャンセル</a>
    </div>
  </div>
</form>

感想

モーダルの呼び出しも、そしてコールバックもかなり簡単に書けて感動しました。
早くレベルアップしたいです。（ポエム）