AngularJS - シンプルなモーダル

More than 3 years have passed since last update.


概要

たまたまAngularJSでモーダルを自作してみようという記事を見かけたので、勉強のためにそれらを参考にv1.5でコンポーネントにしてみた。


参考記事


Component

/**

* modalDialog
*/

(function() {

angular
.module( "app" )
.component( 'modalDialog', {

bindings: {
show: '=',
height: '@',
width: '@'
},
transclude: {
'dialogTitle': "dialogTitle",
'dialogContent': "dialogContent",
},
templateUrl: 'components/modalDialog.html',
controller: ModalDialogController,
controllerAs: "vm"
});

ModalDialogController.$inject = [ ];
function ModalDialogController() {

var vm = this;

vm.dimension = {};
vm.hideModal = function() { vm.show = false; };

// Set the dialog window's dimension if width and height are specified.
setDimension();

function setDimension() {
if ( vm.width ) { vm.dimension.width = vm.width; }
if ( vm.height ) { vm.dimension.height = vm.height; }
}

} // end ModalDialogController

})(); // end module


Template

<div

class='modal_dialog'
ng-show='vm.show'>

<div
class='modal_dialog__overlay'
ng-click='vm.hideModal()'>
</div>

<section
class='modal_dialog__window'
ng-style='vm.dimension'>

<button type="button"
class='modal_dialog__close'
ng-click='vm.hideModal()'>
X
</button>

<div class="container">

<h2
class='modal_dialog__title'
ng-transclude="dialogTitle">
</h2>

<p
class='modal_dialog__content'
ng-transclude="dialogContent">
</p>

</div>

</section>
</div>


Demo

http://mnishiguchi.github.io/JavaScript-Demos/demos/modal_dialog/index.html