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.