iDialog

Simple AngularJS dialog window module

Added by: Sam Deering

GitHub

Repository

iakumai/idialog

Stats

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: http://iakumai.github.io/iDialog

Installation

Bower

bower install idialog

iDialog requires only angular version 1.2.0 or greater

Manual

First, you must add AngularJS scripts to your page:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<!-- Animation scripts are not required, but otherwise you will not see animations -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/animatecss/3.2.0/animate.css"/>
<script src="/src/js/idialog.js"></script>
<link rel="stylesheet" href="/src/css/style.css">

Usage

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.
</script>

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.
</script>

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!