LoginSignup
18
21

More than 5 years have passed since last update.

AngularJSでサクッとダイアログ

Last updated at Posted at 2016-01-13

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

18
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
21