triAngular Dialog

AngularJS multi modal dialog module

Installing

To start using triAngular Dialog in your app run:

bower install tri-angular-dialog --save-dev

Then add 'triNgDialog' dependency to modules that will use triDialog (you need to have ngAnimate installed):

angular.module('myApp', [
 
    …
 
    'ngAnimate'
 
    …
 
    'triNgDialog'
 
    …
 
]);

One more thing is decision, which DOM element would be main container for dialogs (body is preferred):

<body tri-dialog-root>
    …
</body>

Now you can use 'triDialog' service to trigger any dialog:

angular.module('myApp').controller('MyController', function (triDialog) {
 
    …
 
    triDialog({
        controller: 'MyDialogController',
        dialogClass: 'my-dialog-css-class',
        templateUrl: '/partials/dialogs/my-dialog.html'
    });
 
    …
 
});

Sample dialog config:

triDialog({
    blockedDialog: (Boolean),   // if true ESC key nor click on mask does not close dialog (overrides modal)
    controller:    (String),    // angular controller name or constructor
    controllerAs:  (String),    // name of controller to be used in dialog's
    dialogClass:   (String),    // CSS class specific for this dialog
    modal:         (Bool),      // if true click on mask does not close dialog
    namespace:     (String),    // 'label' to match proper 'dialog-root', defaults to 'main'
    templateUrl:   (String),    // route to template, REQUIRED
    // top offset (in scrolled viewport) number of pixels or '123px' or '32%'
    // (0, false or null will put it on top of viewport)
    topOffset:     (String, Number, Bool)
}, { …any data… })

Instance

triDialog( … ) returns instance of Dialog (which is also passed to dialog controller or scope):

{
    data: any;                                      // data passed as second arg to triDialog()
    promise: Promise<any>;                          // promise resolved on close
    close(reason?: any, reject?: boolean): Dialog;  // close dialog and resolve promise (or reject)
    accept(reason?: any): Dialog;                   // close dialog and resolve promise with passed reason
    cancel(reason?: any): Dialog;                   // close dialog and reject promise with passed reason
}

Controller

Controller passed to configuration has access to those locals:

{
    $dialog: dialog, // instance of dialog, has method 'close()'
    $data: dialog.data // shortcut to 'someDataToBePassedToController'
}

If no controller is passed, dialog has attached instance of dialog as '$dialog' to scope;

The Dialog Module can be configured globally

Global values for all dialogs:

app.config(function (triDialogManagerProvider) {
 
    triDialogManagerProvider.config({
        baseZindex: 3000,          // minimum z-index for mask
        rootClass: 'dialog-root',  // class base for dialog-root tag (when inner dialogs are active)
        maskClass: 'dialog-mask',  // class for mask
        dialogClass: 'dialog',     // class for dialog itself
        processTopOffset: false     // should top offset be counted using some internal rules
     });
     
});

You can also pre define dialog configs (and remove those configurations from your controllers/directives/etc:

app.config(function (triDialogManagerProvider) {
 
    triDialogManagerProvider.when('myDialog', {
        controller: 'MyDialogController',
        dialogClass: 'my-dialog-css-class',
        templateUrl: '/partials/dialogs/my-dialog.html'
    });
 
    triDialogManagerProvider.when('mySecondDialog', {
        controller: 'MySecondDialogController',
        dialogClass: 'my-second-dialog-css-class',
        templateUrl: '/partials/dialogs/my-second-dialog.html'
    });
 
});

or config and definitions can be chained:

app.config(function (triDialogManagerProvider) {
 
    triDialogManagerProvider
        .config({ … })
        .when('myDialog', {
            controller: 'MyDialogController',
            dialogClass: 'my-dialog-css-class',
            templateUrl: '/partials/dialogs/my-dialog.html'
        })
        .when('myDialog', {
            controller: 'MySecondDialogController',
            dialogClass: 'my-second-dialog-css-class',
            templateUrl: '/partials/dialogs/my-second-dialog.html'
        });
 
});

and use it anywhere:

angular.module('myApp').controller('MyController', function (triDialog) {
 
    …
 
    triDialog('myDialog', { …some data… });
 
    …
 
    triDialog('mySecondDialog');
 
    …
 
});