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.modalto 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
templateparameter instead ofurl. -
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent