Angular Full Modal Service

Probably the best angular responsive modal service...

demo

Install

npm install --save ng-full-modal
bower install --save ng-full-modal

Dependencies

• angular (js)
• angular-animate (js)
• click-outside (js)
• ng-full-modal.min.js, ng-full-modal.min.css

Include App

angular
.module('yourApp', ['ngAnimate', 'thatisuday.ng-full-modal'])

Options

closeDelay          :   0,                  //  Delay in closing the modal (in milliseconds)
templateHost        :   null,               //  Template files will be served from the location, e.g. http://localhost/templates/
transitionDuration  :   '0.3s',             //  Modal show/hide animation duration
escClose            :   true,               //  Close modal on esc button click
bgClose             :   true,               //  Close modal on background click,
modalWidth          :   '700px',            //  Modal width
backdrop            :   'rgba(0,0,0,0.9)'   //  backdrop color of modal container

Config Plugin

angular.module('yourApp')
.config(function(_nfmProvider){
	_nfmProvider.set({
		templateHost : 'http://127.0.0.1:3000/demo/templates/',
		bodyClass : 'modal-on',
		transitionDuration: '0.3s'
	});
})

Service (how to use?)

angular.module('yourApp'),
.controller('main', function($scope, nfm){
	var user = {name: 'Uday Hiwarale'};
	
	// create new instace of modal
	var formModal = new nfm({
		// template : '<div><h1>Hello World! I am inside modal...</h1></div>',
		// templateUrl : 'http://127.0.0.1:3000/demo/templates/form-modal.html',
		templateFile : 'form-modal.html', // will append to `templateHost` to make full url
		inject : {
			user : user,
		},
		controller : ['$scope', '$element', 'hide', 'user', function($scope, $element, hide, user){
			$scope.msg = "Hello World";
			$scope.formData = user || {};

			$scope.done = function(){
				hide($scope.formData); // pass result
			};

			$scope.hideModal = function(){
				hide(null);
			};

			$scope.hideWithDelay = function(){
				hide(null, 2000); // add 2s delay, override `closeDelay`
			};
		}]
	});

	$scope.showModal = function(){
		formModal.show().then(function(modal){
			console.log('modal...', modal);

			modal.hiding.then(function(result){
				console.log('hiding...', 'result: ', result);
			});

			modal.hidden.then(function(result){
				console.log('hidden...', 'result: ', result);
			});
		});
	};
});

new nfm(options), here options can override global options