ocmodal

An angularJS modal directive / service

Usage no npm install needed!

<script type="module">
  import ocmodal from 'https://cdn.skypack.dev/ocmodal';
</script>

README

ocModal

An angularJS modal directive & service

Key features

  • Easy to use modal
  • Dependencies free (well except angular off course)
  • Load via the service or the directive
  • Style yourself or use the bootstrap's theme

Demo on Plunker

Usage

  • Download the lib (you can use bower install ocModal)
  • Put ocModal.js into you project
  • Add the css file to your project: if you don't have bootstrap 3, include dist/css/ocModal.full.min.css. If you already have bootstrap 3, use dist/css/ocModal.light.min.css
  • Add the module oc.modal to your application
  • Load on demand using the service or the directive :

Service:

$ocModal.open('partials/modal.html');

or

$ocModal.open('<div>My content</div>');

Directive:

<div oc-modal-open="'partials/modal.html'"></div>

or

<div oc-modal-open="'<div>My content</div>'"></div>

See the example in the 'example' folder to know how to integrate ocLazyLoad with your router.

Parameters

You can also pass parameters when you open a modal via the service or the directive. The previous examples are equivalent to :

Service:

$ocModal.open({
    url: 'partials/modal.html'
});

or

$ocModal.open({
    template: '<div>My content</div>'
});

Directive:

<div oc-modal-open="{url: 'partials/modal.html'}"></div>

or

<div oc-modal-open="{template: '<div>My content</div>'}"></div>

The complete list of parameters is :

  • id: you can specify an id for your modal, it is usefull if you want to open more than one modal at the same time
$ocModal.open({
    id: 'modal1',
    url: 'partials/modal.html'
});

By default the id is set to '_default'.

  • url: a template url loaded via ng-include, so you can use an ng-script template or the url of an external html file

  • template: if you prefer to write the template in line, you can use the template parameter instead of url.

  • controller: you can pass a controller for the new content

$ocModal.open({
    url: 'partials/modal.html',
    controller: 'MyController'
});
  • cls: You can specify one or more (space separated) classes to be added to the modal
$ocModal.open({
    url: 'partials/modal.html',
    cls: 'my-class1 my-class2'
});
  • onOpen: you can add a callback that will be called when the modal is opened
$ocModal.open({
    url: 'partials/modal.html',
    onOpen: function() {
        console.log('Just opened !');
    }
});
  • onClose: you can add a callback that will be called when the modal is closed
$ocModal.open({
    url: 'partials/modal.html',
    onClose: function() {
        console.log('Just closed !');
    }
});
  • init: use this to populate the modal scope. If you use a controller you will also be able to access this via $init
$ocModal.open({
    template: '<div>{{param1}}</div>',
    controller: 'MyController',
    init: {
        param1: 'test'
    }
});

And in your controller :

angular.module('app').controller('MyController', ['$scope', '$init', function($scope, $init) {
    console.log($scope.param1, $init.param1);
}]);
  • $ocModalParams: Access the modal params in your controller
angular.module('app').controller('MyController', ['$scope', '$ocModalParams', function($scope, $ocModalParams) {
    console.log($ocModalParams);
}]);
  • isolate: by default your modal's scope will inherit the variables from the init parameter. If you don't want that and you prefer to access these variables via the $init in your controller, you can use isolate=true
$ocModal.open({
    url: 'partials/modal.html',
    controller: 'MyController',
    isolate: true,
    init: {
        param1: 'test'
    }
});

And use $init in your controller :

angular.module('app').controller('MyController', ['$scope', '$init', function($scope, $init) {
    console.log($init.param1);
}]);

But $scope.param1 will be undefined.

  • closeOnEsc: by default you will be able to close the modal with the "ESC" key. If you want to disable this behaviour, use closeOnEsc: false
$ocModal.open({
    url: 'partials/modal.html',
    closeOnEsc: false
});

Functions & attributes

  • open(url/template/object): use this to open the modal
$ocModal.open({
    url: 'partials/modal.html'
});
  • close([id][, param1][, param2][, ...]): use this to close the modal, it will return a promise that resolves at the end of the closing animation (if any)
$ocModal.close();

With no parameter it will close the last opened modal. If you want to close a specific modal, use the id.

$ocModal.close('modal1');

You can also pass what you want to the onClose callback (if you have one) :

$ocModal.open({
    url: 'partials/modal.html',
    onClose: function(a, b, c) {
        console.log(a); // arg1
        b(); // whatever
        console.log(c); // {p1: 'test'}
    }
});

$ocModal.close('arg1', function() { console.log('whatever') }, {p1: 'test'});
  • $scope.closeModal([id][, param1][, param2][, ...]): this is an alias for $ocModal.close() that you can also use in your template
<button ng-click="closeModal()"></button>
  • getOpenedModals(): if you need to get the ids of the opened modals

  • waitingForOpen: check this property if you need to know if another modal will be opened once this one is closed

$ocModal.open({
    url: "partials/login.html",
    controller: 'LoginCtrl',
    onClose: function() {
        if(!$ocModal.waitingForOpen) {
            $state.transitionTo('welcome');
        }
    }
});

Directives

  • oc-modal-open: this is an alias for $ocModal.open() that you can also use in your template.
<div oc-modal-open="{url: 'partials/modal.html'}"></div>
  • oc-modal-close: this is an alias for $ocModal.close() that you can also use in your template.
<button oc-modal-close="'Some text '+testVar"></button>

Animations

You can use a set of animations by including the file ocModal.animations.css and by adding one of those classes with the cls parameter :

  • fade-in
  • slide-down
  • scale
  • fall
  • flip-horizontal
  • flip-vertical
  • super-scaled
  • slit
oc-modal-open="{url: 'partials/modal.html', cls: 'fade-in'}"

You can add your own animations by adding new styles to .modal .modal-dialog .modal-content and .modal .modal-dialog .modal-content.opened.