AngularJS - シンプルなモーダル

概要

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

参考記事

• http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/
• http://www.bennadel.com/blog/2806-creating-a-simple-modal-system-in-angularjs.htm
• http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/

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