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