AngularJS multi modal dialog module
To start using triAngular Dialog in your app run:
bower install tri-angular-dialog
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'
});
…
});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… })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 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;
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');
…
});