AngularJS multi modal dialog module

Added by: Sam Deering





Stars: 1

Watchers: 1

Forks: 0

Module Description

triAngular Dialog

Built with Grunt

AngularJS multi modal dialog module

Can be triggered from JavaScript:

triDialog(someTriDialogConfig, someDataToBePassedToController);

Sample dialog config:

someTriDialogConfig = {
    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, MUST BE
    // 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)


Controller passed to configuration has acces to those locals:

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

Other properties are appended to 'data' object in $scope, so you can pass any callbacks or models. Also dialog's $scope has 'closeClick' method.

The Dialog Module can be configured globally

app.config(['triDialogManagerProvider', function (triDialogManagerProvider) {
         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

Module stats last updated: 2015-05-28 10:24:07

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!