ng-full-modal

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