A complete AngularJS service with controllers and templates for generating application modals and dialogs for use with Angular-UI-Bootstrap and Twitter Bootstrap
24 people use it
Author: 5355587? m-e-conroy

angular-dialog-service !! Please use one of the release versions rather than the Master Branch. The Master Branch has untested merges and changes and is a work in progress. I urge you to always use a release version rather than linking directly to the Master Branch, as the Master Branch may change and may not always be backward compatible.

!! v4.x.x + is not backward compatible with versions 1,2,3,3.1 Please refer to the changes section to view what is different in v4.0

A complete AngularJS service with controllers and templates for generating application modals and dialogs for use with Angular-UI-Bootstrap and Twitter Bootstrap. Supports, i18n, language translations for dialog headers, messages and buttons via angular-translate.


v1.0 : v2.0 : v4.2 : v4.2 with UI-Bootstrap Date Picker directive : Release Versions:

v1.0 : supports AngularJS 1.1.5 and below. v2.0 : supports AngularJS 1.2 + v3.0 : supports AngularJS 1.2 +, Angular UI Bootstrap 0.10.0 v4.0.0 - v4.1.0 : supports AngularJS 1.2 +, Angular UI Bootstrap 0.10.0, Bootstrap 3 + v4.2.0 : supports AngularJS 1.2 +, Angular UI Bootstrap 0.11.0, Bootstrap 3.1 + Predefined dialogs/modals for v5.0.0 - re-introduction of the [opts] parameter to dialogs methods:

dialogs.error(header,msg[,opts]) dialogs.wait(header,msg,progress[,opts]) dialogs.notify(header,msg[,opts]) dialogs.confirm(header,msg[,opts]) dialogs.create(url,ctrlr,data[,opts]) Predefined dialogs/modals for v4.2.0

dialogs.error(header,msg[,sz]) dialogs.wait(header,msg,progress[,sz]) dialogs.notify(header,msg[,sz]) dialogs.confirm(header,msg[,sz]) dialogs.create(url,ctrlr,data[,sz]) Predefined dialogs/modals for v4.0.0 and v4.1.0:

dialogs.error(header,msg) dialogs.wait(header,msg,progress) dialogs.notify(header,msg) dialogs.confirm(header,msg) dialogs.create(url,ctrlr,data) Predefined dialogs/modals for v3.1.0 and below:

$dialogs.error(header,msg,[static]) $dialogs.wait(header,msg,progess,[static]) $dialogs.notify(header,msg,[static]) $dialogs.confirm(header,msg,[static]) $dialogs.create(url,ctrlr,data,opts) Dependencies:


Angular JS - (version 1.1.5 and less) Angular UI Bootstrap - (version <= 0.6.0, Non-Bootstrap 3 Branch) with embedded templates. Twitter Bootstrap CSS (2+) v2.0 Additional Dependencies

Angular JS ngSanitize - ngSanitize: (needed for ng-bind-html) v3.0

AngularJS 1.2 + Angular UI Bootstrap 0.10.0 Twitter Bootstrap CSS 3.0.3 AngularJS ngSanitize v4.0.0 - v4.1.0

AngularJS 1.2 + Angular UI Bootstrap Modal 0.10.0, with templates ( Twitter Bootstrap CSS 3 + (includes 3.1.1) Angular ngSanitize Angular Translate ( v4.2.0 & v5.0.0

Same as v4.0.0 with the exception of the following:

Angular UI Bootstrap Modal 0.11.0, with templates ( Twitter Bootstrap CSS 3.1.x ( CSS:

Included a css file that has a .modal class fix for Bootstrap and also has some predefined styles for the various modals described in the service.

v3.0 css file has the .modal class removed that had been a fix for a Bootstrap 3 display problem. This has since been rectified by Angular UI and Bootstrap.



Added support for Angular UI Bootstrap 0.10.0. Added the ability to customize the header on the error and wait dialogs. Added example files. v4.0.0 - v4.1.0

Removed '$' from the '$dialogs' service as this is reserved for core AngularJS naming. The service is now just 'dialogs.' Changed 'dialogs' service from factory to provider, you can now use 'dialogsProvider' to set various options of the modals that were previously passed as parameters to the dialog's service methods. dialogsProvider.useBackdrop([true,false,'static']) - True or false to use a backdrop for the modal, 'static' to use a backdrop and disallow closing on mouse click of the backdrop. dialogsProvider.useEscClose([true,false]) - Whether or not to allow the use of the 'ESC' key to close the modal dialogsProvider.useClass([string]) - Sets an additional CSS class to the modal window dialogsProvider.useCopy([true,false]) - Determines whether to use angular.copy or not when passing a data object to the custom dialog service. Setting this to false will allow the modal to retain the two-way binding with the calling controller - thus changing data in the modal will automatically change it in the calling controller's scope. The default is setting is true, so if you want the two-way binding you need to set this to false. Main module is no longer 'dialogs' as this would conflict with the new naming of the service. It is now 'dialogs.main,' include that in your application's module definition to use this service. Added i18n support via Angular-Translate (, use the '$translateProvider' to set language specific defaults. Default language is currently 'en-US.' An example is provided in the example folder that will show you how to change the defaults from English to Spanish. Translations can be set on the following: DIALOGS_ERROR (modal header) DIALOGS_ERROR_MSG DIALOGS_CLOSE (modal button) DIALOGS_PLEASE_WAIT (modal header) DIALOGS_PLEASE_WAIT_ELIPS (modal header) DIALOGS_PLEASE_WAIT_MSG DIALOGS_PERCENT_COMPLETE (modal message partial) DIALOGS_NOTIFICATION (modal header) DIALOGS_NOTIFICATION_MSG DIALOGS_CONFIRMATION (modal header) DIALOGS_CONFIRMATION_MSG DIALOGS_OK (modal button) DIALOGS_YES (modal button) DIALOGS_NO (modal button) v4.2.0

Supports everything described above in v4.0.0 - v4.1.0 and added the following

dialogsProvider.setSize(['sm','lg']) - This will set modal size application wide, but can be overridden using the 'opts.wSize' parameter added to each dialog method call. v5.0.0

Optionally pass in options object, possible overrides:

opts = { 'keyboard': true or false 'backdrop': 'static' or true or false 'size': 'sm' or 'lg' //small or large modal size 'windowClass': 'dialogs-default' // additional CSS class(es) to be added to a modal window 'copy': true or false // used only with create custom dialog } Notes:

Angular Translate: v4.0 requires angular-translate be included. Bootstrap 3: (v3.0 of this service no longer requires this fix) There's a problem with the actual modal being displayed even though it appears in the HTML code to be present. I found that adding a "display: block" to Bootstrap 3's .modal class solved the problem. It should not rely on including the Bootstrap JS. For version 2.0 + of this service module do not forget to include the ngSanitize Angular module.

comments powered by Disqus
This page was last updated over 2 years ago.