$dialogProvider (service in ui.bootstrap)

Description

Used for configuring global options for dialogs.

Methods

options(opts)

Sets the default global options for your application. Options can be overridden when opening dialogs. Available options are:

• backdrop: a boolean value indicating whether a backdrop should be used or not, defaults to true
• dialogClass: the css class for the modal div, defaults to 'modal'
• backdropClass: the css class for the backdrop, defaults to 'modal-backdrop'
• transitionClass: the css class that applies transitions to the modal and backdrop, defaults to 'fade'
• triggerClass: the css class that triggers the transitions, defaults to 'in'
• dialogOpenClass: the css class that is added to body when dialog is opened, defaults to 'modal-open'
• resolve: members that will be resolved and passed to the controller as locals
• controller: the controller to associate with the included partial view
• backdropFade: a boolean value indicating whether the backdrop should fade in and out using a CSS transition, defaults to false
• dialogFade: a boolean value indicating whether the modal should fade in and out using a CSS transition, defaults to false
• keyboard: indicates whether the dialog should be closable by hitting the ESC key, defaults to true
• backdropClick: indicates whether the dialog should be closable by clicking the backdrop area, defaults to true

Example:

var app = angular.module('App', ['ui.bootstrap.dialog'] , function($dialogProvider){
    $dialogProvider.options({backdropClick: false, dialogFade: true});
});

$dialog service

Description

Allows you to open dialogs from within your controller.

Methods

dialog([templateUrl[, controller]])

Creates a new dialog, optionally setting the templateUrl, and controller options.

Example:

app.controller('MainCtrl', function($dialog, $scope) {
    $scope.openItemEditor = function(item){
        var d = $dialog.dialog({dialogFade: false, resolve: {item: function(){ return angular.copy(item); } }});
        d.open('dialogs/item-editor.html', 'EditItemController');
    };
});

// note that the resolved item as well as the dialog are injected in the dialog's controller
app.controller('EditItemController', ['$scope', 'dialog', 'item', function($scope, dialog, item){
    $scope.item = item;
    $scope.submit = function(){
        dialog.close('ok');
    };
}]);

messageBox(title, message, buttons)

Opens a message box with the specified title, message and a series of buttons can be provided, every button can specify:

• label: the label of the button
• result: the result used to invoke the close method of the dialog
• cssClass: optional, the CSS class (e.g. btn-primary) to apply to the button

Example:

app.controller('MainCtrl', function($dialog, $scope) {
    $scope.deleteItem = function(item){
        var msgbox = $dialog.messageBox('Delete Item', 'Are you sure?', [{label:'Yes, I\'m sure', result: 'yes'},{label:'Nope', result: 'no'}]);
        msgbox.open().then(function(result){
            if(result === 'yes') {deleteItem(item);}
        });
    };
});

Dialog class

The dialog object returned by the $dialog service methods open and message.

Methods

open

(Re)Opens the dialog and returns a promise.

close([result])

Closes the dialog. Optionally a result can be specified. The result is used to resolve the promise returned by the open method.

isOpen

Returns true if the dialog is shown, else returns false.