AngularJS と UI Bootstrapで$uibModalを使う場合のメモ

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

 <a href="https://angular-ui.github.io/bootstrap/" target="_blank">https://angular-ui.github.io/bootstrap/</a>

##導入方法

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

```bash
$ bower install angular-bootstrap
```

モジュールを追加

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

##使用方法

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

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

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

※ templateUrlも使えます。
<a href="http://codepen.io/satofaction/pen/qdLwKr" target="_blank">サンプル</a>

##controllerを使ってみる

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

```html:html
<html ng-app="App" ng-controller="AppCtrl">
<body>
  <button ng-click="show()">モーダル表示</button>
</body>
</html>
```
```js:js
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 = 'メッセージ';
  }]);
```

<a href="http://codepen.io/satofaction/pen/oXmvgp" target="_blank">サンプル</a>


##resolveを使ってみる

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

```html:html
<html ng-app="App" ng-controller="AppCtrl">
<body>
  <button ng-click="show()">モーダル表示</button>
</body>
</html>
```
```js:js
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;
  }]);
```
<a href="http://codepen.io/satofaction/pen/waRxVy" target="_blank">サンプル</a>

##backdropを使ってみる

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

```html: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>
```
```js:js
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 = 'メッセージ';
  }]);
```
<a href="http://codepen.io/satofaction/pen/pJqBKM" target="_blank">サンプル</a>

##sizeを使ってみる

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

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

```html: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>
```
```js:js
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 = 'メッセージ';
  }]);
```
<a href="http://codepen.io/satofaction/pen/waRVEQ" target="_blank">サンプル</a>

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

```html:html
<html ng-app="App" ng-controller="AppCtrl">
<body>
  <button class="btn btn-primary" ng-click="show()">モーダル表示</button>
  {{message}}
</body>
</html>
```
```js:js
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;
  }]);
```
<a href="http://codepen.io/satofaction/pen/QbYLbL" target="_blank">サンプル</a>

##$closeと$dismissを使ってみる

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

```html:html
<html ng-app="App" ng-controller="AppCtrl">
<body>
  <button class="btn btn-primary" ng-click="show()">モーダル表示</button>
  {{message}}
</body>
</html>
```
```js:js
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();
    }
  }]);
```
<a href="http://codepen.io/satofaction/pen/RPEXdy" target="_blank">サンプル</a>