Add idialog module to your application. For example:
angular.module('my-cool-app', ['idialog']);
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;}
Click this link, please.
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})
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); }]);