caph-dialog

'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>