AngularJSとUI Bootstrapを使ってモーダルを表示する為のメモです。

導入方法

bowerでライブラリをインストール

$ bower install angular-bootstrap

モジュールを追加

angular.module('App', ['ui.bootstrap'])

使用方法

モーダルを表示してみる。
$uibModalサービスを使う。

html

<html ng-app="App" ng-controller="AppCtrl">
<body>
 <button ng-click="show()">モーダル表示</button>
</body>
</html>

angular.module('App', ['ui.bootstrap'])
  .controller('AppCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {
    $scope.show = function() {
      $uibModal.open({
        template: '<div class="md">モーダルだよ</div>'
      });
    }
  }])

※ templateUrlも使えます。
サンプル

controllerを使ってみる

modalのcontroller属性を使ってみます。
controllerとして、指定した値がモーダルのcontrollerとなります。

html

<html ng-app="App" ng-controller="AppCtrl">
<body>
  <button ng-click="show()">モーダル表示</button>
</body>
</html>

angular.module('App', ['ui.bootstrap'])
  .controller('AppCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {
    $scope.show = function() {
      $uibModal.open({
        template: '<div class="md">{{message}}</div>',
        controller: 'ModalCtrl'
      })
    }
  }])
  .controller('ModalCtrl', ['$scope', function($scope) {
    $scope.message = 'メッセージ';
  }]);

サンプル

resolveを使ってみる

resolve定義した、オブジェクトをmodal側で使用することができる。

html

<html ng-app="App" ng-controller="AppCtrl">
<body>
  <button ng-click="show()">モーダル表示</button>
</body>
</html>

angular.module('App', ['ui.bootstrap'])
  .controller('AppCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {
    $scope.show = function() {
      $uibModal.open({
        template: '<div class="md">{{message}}</div>',
        controller: 'ModalCtrl',
        resolve: {
          myMessage: function() {
            return {
              mes: 'myMessageをmodal内で使用できる'
            };
          }
        }
      })
    }
  }])

//resolveで定義したmyMessageをインジェクションして使用する。

  .controller('ModalCtrl', ['$scope', 'myMessage', function($scope, myMessage) {
    $scope.message = myMessage.mes;
  }]);

サンプル

backdropを使ってみる

backdrop:true ・・・　デフォルトはtrue。背景クリックでモーダルを閉じる。
backdrop:false ・・・背景クリックでモーダルを閉じれなくする。背景も表示されない。
backdrop:"static" ・・・背景クリックでモーダルを閉じれなくする。背景は表示される。これだけ文字列として定義する。

html

<html ng-app="App" ng-controller="AppCtrl">
<body>
  <button ng-click="show(true)">モーダル表示(true)</button>
  <button ng-click="show(false)">モーダル表(false)</button>
  <button ng-click="show('static')">モーダル表示(static)</button>
</body>
</html>

angular.module('App', ['ui.bootstrap'])
  .controller('AppCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {
    $scope.show = function(backdrop) {
      $uibModal.open({
        template: '<div class="md">{{message}}</div>',
        controller: 'ModalCtrl',
        backdrop:backdrop
      })
    }
  }])
  .controller('ModalCtrl', ['$scope', function($scope) {
    $scope.message = 'メッセージ';
  }]);

サンプル

sizeを使ってみる

modalにclassを挿入できる。
.modal- + {指定の値｝

modal-smクラスと、modal-lgはbootstrap側に用意されているので、下記のようにそのまま使うことができる。

html

<html ng-app="App" ng-controller="AppCtrl">
<body>
  <button ng-click="show()">モーダル表示</button>
  <button ng-click="show('sm')">モーダル表示(sm)</button>
  <button ng-click="show('lg')">モーダル表示(lg)</button>
</body>
</html>

angular.module('App', ['ui.bootstrap'])
  .controller('AppCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {
    $scope.show = function(size) {
      $uibModal.open({
        template: '<div class="md">{{message}}</div>',
        controller: 'ModalCtrl',
        size:size
      })
    }
  }])
  .controller('ModalCtrl', ['$scope', function($scope) {
    $scope.message = 'メッセージ';
  }]);

サンプル

scopeをつかってみる

scope属性経由で表示元からモーダルのscopeを操作することができます。

html

<html ng-app="App" ng-controller="AppCtrl">
<body>
  <button class="btn btn-primary" ng-click="show()">モーダル表示</button>
  {{message}}
</body>
</html>

angular.module('App', ['ui.bootstrap'])
  .controller('AppCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {
    $scope.test = "scopeを連携";
    $scope.show = function(backdrop) {
      $uibModal.open({
        template: '<div class="md">{{message}}</div>',
        controller: 'ModalCtrl',
        scope: $scope
      })
    }
  }])
  .controller('ModalCtrl', ['$scope', function($scope) {
    $scope.message = $scope.test;
  }]);

サンプル

$closeと$dismissを使ってみる

$uibModalInstance経由で、modalを閉じた際にcallbackを受け取ることができる。
$close()を実行すると、resolve()。
$dismiss()を実行すると、reject()。

html

<html ng-app="App" ng-controller="AppCtrl">
<body>
  <button class="btn btn-primary" ng-click="show()">モーダル表示</button>
  {{message}}
</body>
</html>

angular.module('App', ['ui.bootstrap'])
  .controller('AppCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {
    $scope.show = function() {
      var modalInstance = $uibModal.open({
        template: '<div class="md">
                   <button class="btn btn-primary" ng-click="ok()">ok</button>
                   <button class="btn btn-warning" ng-click="cancel()">cancel</button>
                  </div>',
        controller: 'ModalCtrl'
      });

      modalInstance.result.then(function() {
       $scope.message = 'closeが実行されました。';
      }, function() {
         $scope.message = 'dismissが実行されました。';
      });
    }
  }])
  .controller('ModalCtrl', ['$scope', '$uibModalInstance', function($scope, $uibModalInstance {
    $scope.ok = function() {
      $uibModalInstance.close();
    }
    $scope.cancel = function() {
      $uibModalInstance.dismiss();
    }
  }]);

サンプル