ng-easy-modal v2.1.6

ngEasyModal

A simple directive/delegator for show, get and hide modals. Demo Page

$ npm install ng-easy-modal --save

Usage

Load ng-easy-modal.js library in your index.html file and inject ngEasyModal module inside your angular module

angular.module('MyApp', ['ngEasyModal'])

Inject EasyModalDelegate inside your controller/service/directive and connect with your scope ($scope or this);

.controller('MainCtrl', ['EasyModalDelegate', function MainCtrl(EasyModalDelegate) {
    this.easyModal = EasyModalDelegate;
}]);

Create a new Object for set all EasyModal params

.controller('MainCtrl', ['EasyModalDelegate', function MainCtrl(EasyModalDelegate) {
    this.easyModal = EasyModalDelegate;

    this.objectForEasyModal = {
      // Status or ID (you will call it for show/hide this EasyModal)
      status: 'classic',
      // Title
      title: 'My EasyModal Title',
      // Content
      body: 'My EasyModal body text',
      // Buttons (label and action)
      buttons: [{
        label: 'Disagree',
        action: function(){
          alert('Disagree');
        }
      }, {
        label: 'Agree',
        action: function(){
          alert('Agree');
        }
      }],
      // Close on clickOut
      clickOut: false,
      // template
      templateUrl: 'folder/file.html'
    };
}]);

Insert inside your .html file:

<div ng-controller="MainCtrl as main">
  <button
    ng-click="main.easyModal.show(main.objectForEasyModal)">
    Show my classic modal
  </button>

  <easy-modal
    ng-if="main.easyModal.status('classic')">
  </easy-modal>
</div>

Style

Insert ng-easy-modal.css in the <header> of your .html file

<header>
  <title>Your Title</title>
  ...

  <link rel="stylesheet" href="ng-easy-modal.css">

  ...
</header>

CSS classes inside easy-modal directive:

.easy-modal
.easy-modal-box
.easy-modal-box--head
.easy-modal-box--body
.easy-modal-box--footer
.easy-modal-box--footer-btn
.easy-modal-close

Animation

First include angular-animate.js and ng-easy-modal.css in your HTML:

<link rel="stylesheet" href="ng-easy-modal.css">

<script src="angular.js">
<script src="angular-animate.js">

Then load the module in your application by adding it as a dependent module:

angular.module('MyApp', ['ngEasyModal', 'ngAnimate'])

Including ngAnimate and ng-easy-modal.css the animation hooks are enabled for ngEasyModal.

API

• EasyModalDelegate.show(object)
• EasyModalDelegate.close()
• EasyModalDelegate.status(value)
• EasyModalDelegate.get(value);
• reset-template

show(object)

// Set your modal
var myModal = {
  status: 'yourStatusOrID',
  title: 'Modal title',
  body: 'Modal paragraph',
  buttons: [{
    label: 'Button one',
    action: function(){
      alert('I chose button one!');
    }
  }, {
    label: 'Button two',
    action: function(){
      alert('I chose button two!');
    }
  }],
  clickOut: false,
  templateUrl: 'folder/file.html'
};

// Show your modal
EasyModalDelegate.show(myModal)

close()

Close the current modal

EasyModalDelegate.close()

status(value)

Return true/modalObject if we show a modal with the same status/id

<easy-modal
  ng-if="myCtrl.easyModal.status('helloModal')">
</easy-modal>

<button
  ng-click="myCtrl.easyModal.show({status: 'helloModal', title: 'Hi!'})">
</button>

get(value)

Return value from the current modal

EasyModalDelegate.get('status');
EasyModalDelegate.get('title');
EasyModalDelegate.get('body');
EasyModalDelegate.get('buttons');
EasyModalDelegate.get('clickOut');
EasyModalDelegate.get('templateUrl');

reset-template

Reset modal template, use it with transclude method

<easy-modal
  reset-template="true"
  ng-if="myCtrl.easyModal.status('myModal')">
    <h1>My new title</h1>
    <p>My new content</p>
    <button>CLick me!</button>
</easy-modal>

<button
  ng-click="myCtrl.easyModal.show({status: 'myModal'})">
</button>