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');

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

Directive:

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

<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'
});

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

Directive:

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

<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.

ocombe / ocModal

readme