How to use it?

Add idialog module to your application. For example:

angular.module('my-cool-app', ['idialog']);

Animations support?

Just include angular-animation and animate.css to your page:

<link rel="stylesheet" href="//cdn.jsdelivr.net/animatecss/3.2.0/animate.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.min.js"></script>

And do not forget to add `ngAnimate` to you application:

angular.module('example', ['idialog', 'ngAnimate'])

By default iDialog uses `zoomOutUp` and `zoomInUp` animations from animate.css, but you can overwrite it.

.idialog.animated.ng-hide-add, .idialog.animated.ng-hide-remove {-webkit-animation:zoomInUp 1s; animation:zoomInUp 1s;}
.idialog.animated.ng-hide-add {display:block !important;}
.idialog.animated.ng-hide {-webkit-animation:zoomOutUp 1s; animation:zoomOutUp 1s;}

Want to see it!

• Click this link to see a very simple dialog window.
• Windows can contains any content or angular directives. Each dialog window has an own $scope. See an example.
• You can add an any class to iDialog. Example.
• Click this link to load content from a server.

Since 0.2 iDialog supports events. Where is it?

Click this link, please.

Can i use in inside JS?

You can use idialog inside angular directives. Include $idialog service to your directive and use it:

angular.module('my-cool-app', ['idialog'])
    .directive('example', ['$idialog', function($idialog) {
        return {
            restrict: 'A',
            link: function() {
                $idialog('idialog-3');
            }
        }
    }]);
            

Service signature:

$dialog(templateName, {'class':'dialog-window-css-class', dialogId:'dialog-id-for-events})

How to change default window template?

In your module put the template into a $templateCache. Example:

angular.module('my-cool-app', ['idialog'])
    .run(['$templateCache', 'idialogWindowTpl', function($templateCache, idialogWindowTpl) {
        $templateCache
        .put(idialogWindowTpl, YOUR_TEMPLATE_HERE);
    }]);