thalassa-aqueduct
Version:
Dynamic haproxy load balancer and configuration. Part of Thalassa
98 lines (65 loc) • 3.71 kB
Markdown
# $dialogProvider <small>(service in ui.bootstrap)</small>
## 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.