ng-modal

ng-modal is a simple method to create modals for angularjs.

Installation

npm install @sysopnecho/ng-modal --save

Usage

1.- first of all, you have to inject the dependency:

angular.module('myApp', ['sysopnecho.ng-modal']) 

//Or if you are using CommonJS:
angular.module('myApp', [
    require('@sysopnecho/ng-modal') 
])

2.- Then, to render a modal you have to inject $modal, call openModal function and pass the config object:

angular.module('myApp')
.controller('myController', [
    '$scope', '$modal',
    function(scope, modal){

        scope.openModal = openModal;

        function openModal(){
            modal.openModal({
                urlView: 'modules/modals/myModal.html',
                controller: 'myModal-controller'
            }).then(function(resp){
                /**
                 * when modalInstance.close()
                 */
                console.log(resp);
            }).catch(function(resp){
                /**
                 * when modalInstance.dismiss()
                 */
                console.log(resp);
            });
        }
    }
])

3.- Use close or dismiss from $modalInstance service to close the current modal.

angular.module('myApp')
.controller('myModal-controller', [
    '$scope', '$modalInstance', 
    function(scope, modalInstance){
        
        scope.acceptChanges = acceptChanges;
        scope.cancelChanges = cancelChanges

        function acceptChanges(){
            modalInstance.close('some param from modalInstance.close')
        }

        function cancelChanges(){
            modalInstance.dismiss('some param modalInstance.dismiss');
        }
    }
])

4.- you also need import the basic styles:

@import '@ns-angularjs/modal/dist/sass/main' //using './node_modules' in sass path

If you want, can use themes included:

@import '@ns-angularjs/modal/dist/sass/main' //using './node_modules' in sass path
@import '@ns-angularjs/modal/dist/sass/themes/light' //using './node_modules' in sass path

Note: by default, it uses the following css classes when renders modals. You must cumtomize it:

sbj_has-modal for body element (indicate that there is a opened modal)

sbj_modal-container for container element

sbj_modal-backdrop for modal backdrop (one that changes its zindex)

sbj_modal for rendered modal component (over modal backdrop)

sbj_modal-content wraps your modal view

Config Object

• urlView String : url of modal or alert view

• view String : modal or alert view

• static Boolean : determines if the modal is a static modal (clicking outside does not close the modal)

• type Number : type of modal or alert (this attribute is defined internally, however you can set it when you are defining a custom alert)

• params Object : any litereal object with params that you need

• resolve Object : any literal object with params. These params are resolved before modal controller be instantiated and it can be any value like promises, literal values or functions

$modalConfigProvider

Allows you to configure the default properties:

• staticModal Function : any opened modal will be static

• staticAlert Function : any opened alert will be static. Except the custom alerts.

• staticConfirm Function : any opened alert of type confirm will be static. Except the custom alerts.

• defaultZindex Function : sets the initial zindex for modals (used by modal backdrops, modals and alerts)

• alertTitle Function : sets a custom title for alerts. Except for the custom alerts.

• confirmTitle Function : sets a custom title for alerts of type confirm. Except for the custom alerts.

• alertUrlView Function : sets the url view for alerts of any type.

• alertView Function: set the inline html view for alert of any type.

• alertController Function: sets the controller for alerts of any type.

• alert Function: defines a new custom alert.

Example

angular.module('myApp')
.config([
    '$modalConfigProvider', '$modalConstant',
    function(modalConfigProvider, modalConstant){

        modalConfigProvider
        .staticModal() //modals are static by default
        .defaultZindex(3500) //zindex will start from 3500
        .alertTitle('Custom title') //title for all alerts
        .confirmTitle('Custom Confirm') //title for all alerts of type confirm
        .alertUrlView('/views/modals/custom-alert.html')

        /**
         * this controller can be a named controller, function or array with dependencies
         */
        .alertController([
            '$scope', '$modalInstance', '$modalConstant',
            function(scope, modalInstance, modalConstant){
                
                /**
                 * by default it defines these variables:
                 */
                console.log(scope.$message);
                console.log(scope.$title);
                console.log(scope.$modalType); 

                /**
                 * we can write any logic:
                 */
                scope.isConfirm = scope.$modalType == modalConstant.TYPE_ALERT_CONFIRM;
                scope.myTitle   = scope.$title;
                scope.myMessage = scope.$message;

                /**
                 * and to define actions
                 */
                scope.ok = function(){
                    modalInstance.close();
                }
                scope.cancel = function(){
                    modalInstance.dismiss();
                }
            }
        ])

        /**
         * We can set custom alerts. 
         * These custom alerts have their own and isolated properties.
         * We can open an alert confirm like this:
         * 
         * modal.alert('¿are you sure?', 'confirmYesNo').then(function(){
         *      console.log('yes');
         * }).catch(function(){
         *      console.log('no');
         * });
         */
        .alert('confirmYesNo', {
            urlView: '/views/modals/confirm-yes-no.html',
            controller: [
                '$scope', '$modalInstance',
                function(scope, modalInstance){

                    /**
                     * by default it defines these variables:
                     */
                    console.log(scope.$message);
                    console.log(scope.$title);
                    console.log(scope.$modalType); 
                    
                    scope.yes = function(){
                        modalInstance.close();
                    }
    
                    scope.no = function(){
                        modalInstance.dismiss();
                    }
                }
            ]
        })
    }
])
.controller('myController', [
    '$scope', '$modal', '$q',
    function(scope, modal, q){
        
        scope.openModal = openModal;
        scope.openAlert = openAlert;
        scope.openConfirm = openConfirm;
        scope.openConfirmYesNo = openConfirmYesNo;

        scope.modalController = [
            '$scope', '$modalInstance',
            function(scope, modalInstance){
                scope.myVar = modalInstance.params.promise;
                if (typeof modalInstance.params.callback == 'function'){
                    modalInstance.params.callback('modal controller instantiated!')
                }
                scope.closeModal = function(){
                    modalInstance.close({
                        value: 1
                    });
                }
            }
        ];

        function openConfirm(){
            modal.confirm('¿are you sure?').then(function(){
                console.log('accept');
            }).catch(function(){
                console.log('cancel');
            });
        }

        function openConfirmYesNo(){
            modal.confirm('¿are you sure?', 'confirmYesNo').then(function(){
                console.log('yes');
            }).catch(function(){
                console.log('no');
            });
        }

        function openModal(){
            var defer = q.defer();
            var config = {
                view: '<div><span>{{myVar}}</span><button ng-click="closeModal">Close</button></div>',
                controller: scope.modalController,
                params: {
                    callback: simpleCallback
                },
                resolve: {
                    Num: 1,
                    Str: "this is a string",
                    promiseInFunction: function(){
                        var def = q.defer();
                        setTimeout(function(){
                            def.resolve('async value');
                            defer.resolve('solved from promiseInFunction')
                        }, 5000);
                        return def.promise
                    },
                    promise: defer.promise
                    fn: function(){
                        return true;
                    }
                }
            }

            modal.openModal(config).then(function(value){
                console.log(value);
            });
        }

        function simpleCallback(value){
            console.log(value);
        }
    }
])

view: /views/modals/custom-alert.html

<div>
    <h1>{{myTitle}}</h1>
    <div>
        {{myMessage}}
    </div>
    <div>
        <button ng-click="ok()">Accept</button>
        <button ng-click="cancel()" ng-if="isConfirm">Cancel</button>
    </div>
</div>

view: /views/modals/confirm-yes-no.html

<div>
    <h1>{{$title}}</h1>
    <div>
        {{$message}}
    </div>
    <div>
        <button ng-click="yes()">Yes</button>
        <button ng-click="no()">No</button>
    </div>
</div>

Development

Want to contribute? Great! ng-modal uses Grunt and Browserify for fast developing. Make a change in your file and instantanously see your updates!

Open your favorite Terminal and run these commands:

npm install
npm start

License

@sysopnecho/ng-modal is MIT licensed.