example/index.html
<!doctype html>
<html ng-app="exampleDialog">
<head>
<meta charset="utf-8">
<title>ngDialog demo</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link rel="stylesheet" href="../css/ngDialog.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/ngDialog-theme-default.css">
<link rel="stylesheet" href="../css/ngDialog-theme-plain.css">
<link rel="stylesheet" href="../css/ngDialog-custom-width.css">
<style>
a, button {
font: 14px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
display: block;
color: #333;
margin-bottom: 10px;
}
/* The following 'important' styles are just here to show off trapFocus */
button.ngdialog-button {
border: solid transparent 1px !important;
}
button.ngdialog-button:focus {
border: solid black 1px !important;
}
.ngdialog h2:focus { outline: none; }
button.inline {
display: inline
}
</style>
</head>
<body ng-controller="MainCtrl">
<!-- Buttons and links -->
<a id="via-service" href="" ng-click="open()">Open via service</a>
<button type="button"
ng-dialog="firstDialogId"
ng-dialog-controller="InsideCtrl"
ng-dialog-data="{{jsonData}}"
ng-dialog-class="ngdialog-theme-default"
ng-dialog-show-close="false">Open via directive</button>
<a href="" ng-click="openDefault()">Default theme</a>
<a href="" ng-click="openDefaultWithoutAnimation()">Default theme without animation</a>
<a href="" ng-click="openPlain()">Plain theme</a>
<a href="" ng-click="openPlainCustomWidth()">Plain theme with custom width</a>
<a href="" ng-click="openInlineController()">Inline controller</a>
<a href="" ng-click="openControllerAsController()">Controller with usage of ControllerAs syntax</a>
<a href="" ng-click="openTemplate()">Open with external template for modal</a>
<a href="" ng-click="openTemplateNoCache()">Open with external template for modal (disabled cache)</a>
<a href="" ng-click="openTimed()">Open and use return value to close later</a>
<a href="" ng-click="openNotify()">Open and use promise to know when closed</a>
<a href="" ng-click="openConfirm()">Open confirm modal</a>
<a href="" ng-click="openDefaultWithPreCloseCallbackInlined()">Open default modal with pre-close callback inlined</a>
<button type="button"
ng-dialog="firstDialogId"
ng-dialog-controller="InsideCtrl"
ng-dialog-data="{{jsonData}}"
ng-dialog-class="ngdialog-theme-default"
ng-dialog-scope="this"
ng-dialog-pre-close-callback="directivePreCloseCallback"
ng-dialog-show-close="false">Open via directive with pre-close callback</button>
<a href="" ng-click="openConfirmWithPreCloseCallbackOnScope()">Open confirm modal with pre-close callback on scope</a>
<a href="" ng-click="openConfirmWithPreCloseCallbackInlinedWithNestedConfirm()">Open confirm modal with pre-close inlined with nested confirm.</a>
<a href="" ng-click="openWithoutOverlay()">Open without overlay</a>
<a href="" ng-click="openWithJSSpecificWidth()" id="js-width">Open with js specific width</a>
<a href="" ng-click="openWithJSSpecificHeight()" id="js-height">Open with js specific height</a>
<!-- Templates -->
<script type="text/ng-template" id="firstDialogId">
<div class="ngdialog-message">
<h3>ngDialog template</h3>
<p ng-show="theme">Test content for <code>{{theme}}</code></p>
<p ng-show="ngDialogId">Dialog Id: <code>{{ngDialogId}}</code></p>
<p class="data-passed-through" ng-show="ngDialogData.foo">Data passed through: <code>{{ngDialogData.foo}}</code></p>
<p ng-show="dialogModel.message">Scope passed through: <code>{{dialogModel.message}}</code></p>
<p>Close this dialog: <button class="inline close-this-dialog" ng-click="closeThisDialog()">Close</button></p>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-secondary"
ng-dialog="secondDialogId"
ng-dialog-class="ngdialog-theme-default"
ng-dialog-controller="SecondModalCtrl"
ng-dialog-close-previous>Close and open</button>
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="openSecond()">Open next</button>
</div>
</script>
<script type="text/ng-template" id="dialogWithNestedConfirmDialogId">
<div class="ngdialog-message">
<h3>ngDialog template</h3>
<p>Dialog containing work in which a user has to perform a task (e.g. editing data).</p>
<p>'Save' would save the task's actions, while 'Cancel' would cause the task's actions to be lost.</p>
<p>...other controls here...</p>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('Cancel')">Cancel</button>
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm('Save')">Save</button>
</div>
</script>
<script type="text/ng-template" id="withInlineController">
<div class="ngdialog-message">
<h3>ngDialog template</h3>
<p ng-show="theme">Test content for <code>{{theme}}</code></p>
<p ng-show="exampleExternalData">Example data from external service: <code>{{exampleExternalData}}</code></p>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog()">Close</button>
</div>
</script>
<script type="text/ng-template" id="controllerAsDialog">
<div class="ngdialog-message">
<h3>ngDialog template</h3>
<p>This template uses controllerAs syntax</p>
<p>Value from controller {{ctrl.value}}</p>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog()">Close</button>
</div>
</script>
<script type="text/ng-template" id="secondDialogId">
<h3><a href="" ng-click="closeSecond()">Close all by click here!</a></h3>
</script>
<script type="text/ng-template" id="modalDialogId">
<div class="ngdialog-message">
<h3>ngDialog modal example</h3>
<p>The <code>.openConfirm()</code> function returns a promise that is resolved when confirmed and rejected when otherwise closed. Modal dialogs by default do not close when clicked outside the dialog or when hitting escape. This can ofcourse be overridden when opening the dialog.</p>
<p>Confirm can take a value. Enter one here for example and see the console output: <input ng-model="confirmValue" /></p>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm(confirmValue)">Confirm</button>
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('button')">Cancel</button>
</div>
</script>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script>window.angular || document.write('<script src="../bower_components/angular/angular.min.js">\x3C/script>')</script>
<script src="../js/ngDialog.js"></script>
<!-- App -->
<script>
var app = angular.module('exampleDialog', ['ngDialog']);
// Example of how to set default values for all dialogs
app.config(['ngDialogProvider', function (ngDialogProvider) {
ngDialogProvider.setDefaults({
className: 'ngdialog-theme-default',
plain: false,
showClose: true,
closeByDocument: true,
closeByEscape: true,
appendTo: false,
preCloseCallback: function () {
console.log('default pre-close callback');
}
});
}]);
app.controller('MainCtrl', function ($scope, $rootScope, ngDialog, $timeout) {
$rootScope.jsonData = '{"foo": "bar"}';
$rootScope.theme = 'ngdialog-theme-default';
$scope.directivePreCloseCallback = function (value) {
if(confirm('Close it? MainCtrl.Directive. (Value = ' + value + ')')) {
return true;
}
return false;
};
$scope.preCloseCallbackOnScope = function (value) {
if(confirm('Close it? MainCtrl.OnScope (Value = ' + value + ')')) {
return true;
}
return false;
};
$scope.open = function() {
var new_dialog = ngDialog.open({ id: 'fromAService', template: 'firstDialogId', controller: 'InsideCtrl', data: { foo: 'from a service' } });
// example on checking whether created `new_dialog` is open
$timeout(function() {
console.log(ngDialog.isOpen(new_dialog.id));
}, 2000)
};
$scope.openDefault = function () {
ngDialog.open({
template: 'firstDialogId',
controller: 'InsideCtrl',
className: 'ngdialog-theme-default'
});
};
$scope.openDefaultWithoutAnimation = function () {
ngDialog.open({
template: 'firstDialogId',
controller: 'InsideCtrl',
className: 'ngdialog-theme-default',
disableAnimation: true
});
};
$scope.openDefaultWithPreCloseCallbackInlined = function () {
ngDialog.open({
template: 'firstDialogId',
controller: 'InsideCtrl',
className: 'ngdialog-theme-default',
preCloseCallback: function(value) {
if (confirm('Close it? (Value = ' + value + ')')) {
return true;
}
return false;
}
});
};
$scope.openConfirm = function () {
ngDialog.openConfirm({
template: 'modalDialogId',
className: 'ngdialog-theme-default'
}).then(function (value) {
console.log('Modal promise resolved. Value: ', value);
}, function (reason) {
console.log('Modal promise rejected. Reason: ', reason);
});
};
$scope.openConfirmWithPreCloseCallbackOnScope = function () {
ngDialog.openConfirm({
template: 'modalDialogId',
className: 'ngdialog-theme-default',
preCloseCallback: 'preCloseCallbackOnScope',
scope: $scope
}).then(function (value) {
console.log('Modal promise resolved. Value: ', value);
}, function (reason) {
console.log('Modal promise rejected. Reason: ', reason);
});
};
$scope.openConfirmWithPreCloseCallbackInlinedWithNestedConfirm = function () {
ngDialog.openConfirm({
template: 'dialogWithNestedConfirmDialogId',
className: 'ngdialog-theme-default',
preCloseCallback: function(value) {
var nestedConfirmDialog = ngDialog.openConfirm({
template:
'<p>Are you sure you want to close the parent dialog?</p>' +
'<div class="ngdialog-buttons">' +
'<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog(0)">No' +
'<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm(1)">Yes' +
'</button></div>',
plain: true,
className: 'ngdialog-theme-default'
});
return nestedConfirmDialog;
},
scope: $scope
})
.then(function(value){
console.log('resolved:' + value);
// Perform the save here
}, function(value){
console.log('rejected:' + value);
});
};
$scope.openPlain = function () {
$rootScope.theme = 'ngdialog-theme-plain';
ngDialog.open({
template: 'firstDialogId',
controller: 'InsideCtrl',
className: 'ngdialog-theme-plain',
closeByDocument: false
});
};
$scope.openPlainCustomWidth = function () {
$rootScope.theme = 'ngdialog-theme-plain custom-width';
ngDialog.open({
template: 'firstDialogId',
controller: 'InsideCtrl',
className: 'ngdialog-theme-plain custom-width',
closeByDocument: false
});
};
$scope.openInlineController = function () {
$rootScope.theme = 'ngdialog-theme-plain';
ngDialog.open({
template: 'withInlineController',
controller: ['$scope', '$timeout', function ($scope, $timeout) {
var counter = 0;
var timeout;
function count() {
$scope.exampleExternalData = 'Counter ' + (counter++);
timeout = $timeout(count, 450);
}
count();
$scope.$on('$destroy', function () {
$timeout.cancel(timeout);
});
}],
className: 'ngdialog-theme-plain'
});
};
$scope.openControllerAsController = function () {
$rootScope.theme = 'ngdialog-theme-plain';
ngDialog.open({
template: 'controllerAsDialog',
controller: 'InsideCtrlAs',
controllerAs: 'ctrl',
className: 'ngdialog-theme-plain'
});
};
$scope.openTemplate = function () {
$scope.value = true;
ngDialog.open({
template: 'externalTemplate.html',
className: 'ngdialog-theme-plain',
scope: $scope
});
};
$scope.openTemplateNoCache = function () {
$scope.value = true;
ngDialog.open({
template: 'externalTemplate.html',
className: 'ngdialog-theme-plain',
scope: $scope,
cache: false
});
};
$scope.openTimed = function () {
var dialog = ngDialog.open({
template: '<p>Just passing through!</p>',
plain: true,
closeByDocument: false,
closeByEscape: false
});
setTimeout(function () {
dialog.close();
}, 2000);
};
$scope.openNotify = function () {
var dialog = ngDialog.open({
template:
'<p>You can do whatever you want when I close, however that happens.</p>' +
'<div class="ngdialog-buttons"><button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog(1)">Close Me</button></div>',
plain: true
});
dialog.closePromise.then(function (data) {
console.log('ngDialog closed' + (data.value === 1 ? ' using the button' : '') + ' and notified by promise: ' + data.id);
});
};
$scope.openWithoutOverlay = function () {
ngDialog.open({
template: '<h2>Notice that there is no overlay!</h2>',
className: 'ngdialog-theme-default',
plain: true,
overlay: false
});
};
$scope.openWithJSSpecificWidth = function () {
ngDialog.open({
template: '<h2>Notice that style inline set specific width!</h2>',
className: 'ngdialog-theme-default',
width: 650,
plain: true
});
};
$scope.openWithJSSpecificHeight = function () {
ngDialog.open({
template: '<h2>This modal is using a custom height (400px)! See the inline style</h2>',
className: 'ngdialog-theme-default',
height: 400,
plain: true
});
};
$rootScope.$on('ngDialog.opened', function (e, $dialog) {
console.log('ngDialog opened: ' + $dialog.attr('id'));
});
$rootScope.$on('ngDialog.closed', function (e, $dialog) {
console.log('ngDialog closed: ' + $dialog.attr('id'));
});
$rootScope.$on('ngDialog.closing', function (e, $dialog) {
console.log('ngDialog closing: ' + $dialog.attr('id'));
});
$rootScope.$on('ngDialog.templateLoading', function (e, template) {
console.log('ngDialog template is loading: ' + template);
});
$rootScope.$on('ngDialog.templateLoaded', function (e, template) {
console.log('ngDialog template loaded: ' + template);
});
});
app.controller('InsideCtrl', function ($scope, ngDialog) {
$scope.dialogModel = {
message : 'message from passed scope'
};
$scope.openSecond = function () {
ngDialog.open({
template: '<h3><a href="" ng-click="closeSecond()">Close all by click here!</a></h3>',
plain: true,
closeByEscape: false,
controller: 'SecondModalCtrl'
});
};
});
app.controller('InsideCtrlAs', function () {
this.value = 'value from controller';
});
app.controller('SecondModalCtrl', function ($scope, ngDialog) {
$scope.closeSecond = function () {
ngDialog.close();
};
});
</script>
</body>
</html>