AngularJSでサクッとダイアログ

AngularJSでのダイアログではUI Bootstrapが使えるようです。

UI Bootstrap

以前は"$modal","$modalInstance"という名前で扱っていましたが、現在では"$uibModal","$uibModalInstance"という名前に変更されたようです。
下記のような感じで、必要ライブラリを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="ui-bootstrap-tpls-0.14.3.min.js"></script>

#導入
moduleで"ui.bootstrap"を読み込みます。

angular.module('DialogSample', ['ui.bootstrap']);

#ダイアログの表示

function($scope, $uibModal){
:
//open
var modalInstance = $uibModal.open({
	templateUrl: 'dialog.html',
    controller : 'DialogController',
    backdrop   : true,
    scope      : $scope,
    resolve: {
        params:function(){
            return {
              title:'DialogSample',
              message:'Take it easy!'
            };
        }
    }});
//set callback
modalInstance.result.then(
    function(result){
        $scope.result = result;
        $scope.event = "close";
    },
    function(result){
        $scope.result = result;
        $scope.event = "dismiss";
    });
}

表示するためには"$uibModal.open"を呼び出します。
表示用のレイアウトが記述されているHTMLと、それに紐付けるコントローラーを指定できます。
backdropは背景のことです。falseにすると背景が非表示になり、背景部分をクリックしてもダイアログは閉じません。
'static'を指定した場合は、背景は表示されますが、クリックしても閉じなくなります。
resolveには、ダイアログ側に引数を渡すことができるパラメータです。

また、open関数の戻り値に対し、result.then()関数を呼び出し関数を設定しておくと、ダイアログが閉じた時のイベントが検知できます。

#ダイアログ側

angular.module('DialogSample').controller('DialogController', ['$scope', '$uibModalInstance',　'params',
      function($scope, $uibModalInstance, params){

        $scope.title = params.title;
        $scope.message = params.message;
        $scope.pressClose = function(){
          $uibModalInstance.close('done');
        };
        $scope.pressDismiss = function(){
          $uibModalInstance.dismiss('done');
        };

      }]);

ダイアログを閉じるために、"$uibModalInstance"を設定します。
また、open関数のresolveに設定した引数名を指定することで、それ経由でパラメータを受け取ることができます。

ダイアログを閉じるには、"$uibModalInstance"のcloseまたdismiss関数を呼び出しますが、ここに入れたオブジェクトはresult.then関数に設定した関数内で受け取ることができます。

closeを呼び出した場合は、result.then関数の第一引数に設定した関数が、dismissを呼び出した場合はresult.then関数の第二引数に設定した関数が呼び出されます。

背景クリック時はdismiss呼び出し時と同じ関数が呼び出されます。
背景クリック時には引数には"backdrop click"という文字列が渡されるようです。

下記にソースコードを置いています。
https://github.com/ExistMikan/AngularJSDialogSample/blob/master/index.html