Simple AngularJS dialog window module

Added by: Sam Deering





Stars: 10

Watchers: 10

Forks: 2

Module Description

iDialog AngularJS module

Modal windows with AngularJS. It's very easy to use! More examples and documentation you can found on gh-pages:



bower install idialog

iDialog requires only angular version 1.2.0 or greater


First, you must add AngularJS scripts to your page:

<script src=""></script>

<!-- Animation scripts are not required, but otherwise you will not see animations -->
<script src=""></script>
<link rel="stylesheet" href="//"/>
<script src="/src/js/idialog.js"></script>
<link rel="stylesheet" href="/src/css/style.css">


Include idialog module to your Angular application. Add idialog directive to any element in application and create a template. Example:

<a href="" idialog="tpl-name">Show dialog</a>
<script type="text/ng-template" id="tpl-name">
    This is a dialog content.

iDialog events

Since version 0.2 you can set ID for dialog and catch show/hide events in $scope. Example:

<a href="" idialog="tpl-name" idialog-id="someid">Show dialog</a>

<script type="text/ng-template" id="tpl-name">
    This is a dialog content.

Somewhere in your Angular code:

$scope.$on('iDialogShow', function(e, dialogId) {
   console.log('Show: ', dialogId);

$scope.$on('iDialogHide', function(e, dialogId) {
    console.log('Hide: ', dialogId);

Module stats last updated: 2015-05-28 10:24:15

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!