Edited at

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

More than 1 year has passed since last update.

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

https://angular-ui.github.io/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>


js

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>


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 = 'メッセージ';
}]);

サンプル


resolveを使ってみる

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


html

<html ng-app="App" ng-controller="AppCtrl">

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


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;
}]);


サンプル


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>


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 = 'メッセージ';
}]);

サンプル


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>


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 = 'メッセージ';
}]);

サンプル


scopeをつかってみる

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


html

<html ng-app="App" ng-controller="AppCtrl">

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


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;
}]);

サンプル


$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>


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();
}
}]);


サンプル