angular-ezdialog
A simple AngularJS dialog service built with Bootstrap modal and ngAnimate, aiming to replace native window.alert
.
Demo
Check the demo page for usage example.
Install
Install with bower:
bower install angular-ezdialog --save
In html header:
<script src="bower_components/angular-ezdialog/dist/dialog.min.js">
<link rel="stylesheet" href="bower_components/angular-ezdialog/dist/dialog.min.css">
The css file was built with official bootstrap v3.2.0. Create your own build for custom dialog color.
Ezdialog service
Injectable service ezdialog
.
ezdialog.show(String message[, String title]) or ezdialog.show(Object options) -> Promise object
ezdialog.show
, ezdialog.error
, ezdialog.confirm
, ezdialog.yesno
all accept same arguments.
Display a simple dialog, containing title and message.
// Default options object
options = {
use: "show", // Could be show|error|confirm|yesno. Ezdialog will apply some
// default options according its value.
msg: "message",
title: "title",
// Button click handler. Check callback section for more information.
onok: function(){},
oncancel: function(){},
// Text content on buttons
yes: "OK",
no: "Cancel",
size: "sm", // Could be sm|md|lg.
toggleBackdrop: false // Decided whether to close dialog when clicking
// on backdrop.
};
ezdialog.toggle(String id)
Show/hide a dialog which was created by ezdialogDirective.
ezdialog.conf
An object contains ezdialog's default value.
Dialog promise
A promise returned by ezdialog.show. (.error, .confirm, ...)
promise.then(Function callback(retValue))
Trigger when dialog is closed. By the default, ok button will set retValue to true, otherwise false.
promise.ok(Function callback(Function closeFunc)) -> self
Replace the default ng-click callback. To close the dialog, run closeFunc()
. This has the same effect as options.onok = callback
.
promise.cancel(Function callback(Function closeFunc)) -> self
Same as above.
promise.instance
Dialog instance object.
Dialog instance
You can get it from promise.instance
.
dialog.ok()
By the default, this is same as dialog.close(true)
. Otherwise it will call onok
function.
dialog.cancel()
By the default, this is same as dialog.close(false)
.
dialog.close(value)
Close the dialog and resolve the deferred with value
.
Ezdialog directive
<button ezdialog-toggle="my-modal">Open dialog</button>
<div
ezdialog="my-modal"
ezdialog-title="Title"
size="sm"
type="success"
yes="OK"
no="Cancel"
onok="doSomething($dialog)"
oncancel="doSomething($dialog)"
backdrop-toggle>
...
</div>
ezdialog-toggle = "id"
Dialog id which you want to toggle.
ezdialog = "id"
Create a dialog and set dialog id.
ezdialog-title = "title"
Set dialog title.
size, type, yes, no
Dialog options, same as options object above.
onok = Expression, oncancel = Expression
Replace default onok, oncancel callback. You can access dialog instance with $dialog
to $dialog.close()
manually.
backdrop-toggle
Provide backdrop-toggle attribute to close dialog when clicking on backdrop.
Todos
-
Enhance enter key press behavior.Done! -
Remove ui.bootstrap dependency and use ngAnimate.Done! -
Add ezmodal service and directive.Done! -
Add onclose attribute to overide default ESC key behavior.Changed. Now ESC key will trigger dialog.cancel(). - Add focus stack to trace actived element when opening new dialog.
- Support httpRequest loading message on ng-include.
- Support $q deferred.reject.
- Add custom controller.
- Add waiting dialog. Combine with http?