'caph-dialog' is a floating window that contains title area, content area and button area. Each area can represent with each template described below.
Attributes
Dialog can have several attributes like below
center
If this is true, the dialog will locate center of the screen.
position
The dialog's position which contains properties such as 'x' and 'y'. This value is available when 'center' is not defined.
focusOption
When the dialog is opened, focus is changed to this value by focus controller. Depth and group in properties are available for buttons of the dialog.
timeout
The time in milliseconds to hide after.
on-open
After opening a dialog, this callback function is called.
on-close
After closing a dialog, this callback function is called.
show
open or close the dialog.
Templates
'caph-dialog' consists of 3 templates : 'caph-dialog-title', 'caph-dialog-content', 'caph-dialog-buttons'. Each template represents each area. So, If you put html tags into 'caphDialog' tag with other templates, then you can customize the layout of dialog. You also put html into template for decorating.
<caph-dialog>
<div style="float:right; color:#fff;width: 80%;">
<caph-dialog-title><img src="star.jpg">My Title</caph-dialog-title>
</div>
</caph-dialog>
'caph-dialog-buttons' template has two attributes: 'button-type', 'button-callback'.
button-type
You can set 'button-type' as 'confirm' or 'alert'. Then dialog will have the buttons that is already defined.
- confirm : Dialog have 2 buttons named 'Yes' and 'No'.
- alert : Dialog have 1 button named 'OK'. button-type can be added in the future.
on-select-button
You can set attribute 'on-select-button' for callback function. It will be called when user click the button. And this function can have parameters as '$buttonIndex' and '$event'. '$buttonIndex' is index of selected button in the dialog. '$event' is event object of jQuery.
Example
js
var myApp = angular.module('myApp', ['caph.ui']);
myApp.controller('myController', ['$scope', function($scope) {
$scope.dialog1 ={
center: true,
focusOption: {
depth: 1
},
show: false,
onSelectButton: function(buttonIndex, event){
$scope.dialog1.show = false;
},
onOpen: function(){
console.log('close dialog1! callback');
},
onClose: function(){
console.log('close dialog1! callback');
}
};
}]);
html
<caph-dialog focus-option="dialog1.focusOption" center="dialog1.center" show="dialog1.show" on-open="dialog1.onOpen()" on-close="dialog1.onClose()">
<caph-dialog-title>My Title</caph-dialog-title>
<caph-dialog-content>
There is immeasurable power in it.<br/>
There is immeasurable power in it.
</caph-dialog-content>
<caph-dialog-buttons button-type="confirm" on-select-button="dialog1.onSelectButton($buttonIndex, $event)"/>
</caph-dialog>