ng-dialog Documentation

You can install ngDialog using either Bower or npm.

bower install ng-dialog

npm install ng-dialog

To test the usage of external templates, you can run the provided server demo. This requires installing dependencies in the root folder first, then running the server from the example directory.

1. Install npm dependencies in the project root.
2. Navigate to the example folder.
3. Run node server.js.
4. Access the demo in your browser at http://0.0.0.0:1982/example/index.html (or the IP address provided by the server output).

# From the project root
npm install

# Navigate to example and start server
cd example
node server.js

You can trigger dialogs directly from your HTML using the ng-dialog directive on elements like buttons or links. Most .open(options) options are available as attributes. Note that you must provide either a template ID or a path to a template file via the ng-dialog attribute.

Key directive attributes:

• ng-dialog: The ID or path of the template file.
• ng-dialog-class: CSS class for the dialog.
• ng-dialog-controller: The controller to use for the dialog scope.
• ng-dialog-close-previous: Automatically closes any previously opened dialogs when this one opens.
• ng-dialog-bind-to-controller: Binds the scope defined via directive parameters to the controller.

<button type="button"
    ng-dialog="templateId.html"
    ng-dialog-class="ngdialog-theme-flat"
    ng-dialog-controller="ModalCtrl"
    ng-dialog-close-previous>
    Open modal text
</button>

You can include ngDialog using the following CDN URLs (example for version 0.4.0):

//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog.min.css
//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog-theme-default.min.css
//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog-theme-plain.min.css
//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/js/ngDialog.min.js

To use ngDialog, include the following files in your project: ngDialog.js, ngDialog.css, and ngDialog-theme-default.css. This constitutes a minimal setup.

<link rel="stylesheet" href="lib/ng-dialog/css/ngDialog.min.css">
<link rel="stylesheet" href="lib/ng-dialog/css/ngDialog-theme-default.min.css">
<script src="lib/ng-dialog/js/ngDialog.min.js"></script>

Use ngDialogProvider.setDefaults(options) within your application's .config() block to set global settings for all dialogs.

Common options to set globally:

• className: The default theme class.
• plain: Whether templates are treated as plain strings.
• showClose: Whether to show the close button.
• closeByDocument: Whether clicking the overlay closes the dialog.
• closeByEscape: Whether the Esc key closes the dialog.

var app = angular.module('myApp', ['ngDialog']);
app.config(['ngDialogProvider', function (ngDialogProvider) {
    ngDialogProvider.setDefaults({
        className: 'ngdialog-theme-default',
        plain: true,
        showClose: true,
        closeByDocument: true,
        closeByEscape: true
    });
}]);

After including the necessary files and adding 'ngDialog' to your AngularJS module dependencies, you can use the ngDialog provider in your controllers. To open a dialog, call ngDialog.open() with an options object containing a template and a className (e.g., 'ngdialog-theme-default').

var app = angular.module('exampleApp', ['ngDialog']);

app.controller('MainCtrl', function ($scope, ngDialog) {
    $scope.clickToOpen = function () {
        ngDialog.open({ template: 'popupTmpl.html', className: 'ngdialog-theme-default' });
    };
});

ngDialog broadcasts events to all child scopes during its lifecycle. You can register listeners using $rootScope.$on.

Lifecycle Events:

• ngDialog.opened: Fired when the dialog is opened.
• ngDialog.closing: Fired immediately when the dialog begins closing.
• ngDialog.closed: Fired after all closing animations are complete.

Template Loading Events:

• ngDialog.templateLoading: Fired when template loading starts.
• ngDialog.templateLoaded: Fired when template loading is complete.

Layout Events:

• ngDialog.setPadding: Fired when padding is added to or removed from the <body> tag to compensate for scrollbar toggling. The event provides the pixel value being added.

$rootScope.$on('ngDialog.opened', function (e, $dialog) {
    console.log('ngDialog opened: ' + $dialog.attr('id'));
});

The .open() method returns an object containing:

• id: The unique ID of the created dialog.
• close(value): A function to close the dialog, passing an optional value to the close promise.
• closePromise: A promise that resolves when the dialog is closed. The resolved object contains:
  • id: The ID of the closed dialog.
  • value: The value passed to the close function (or special strings like '$escape', '$closeButton', or '$document' if dismissed via built-in mechanisms).
  • $dialog: The dialog DOM element.
  • remainingDialogs: Number of dialogs still open.

var dialog = ngDialog.open({
    template: 'templateId'
});

dialog.closePromise.then(function (data) {
    console.log(data.id + ' has been dismissed.');
});

The ngDialog.openConfirm(options) method opens a dialog that does not close when hitting Esc or clicking the overlay. It returns an Angular promise that:

• Resolves if the .confirm() method is called within the dialog's scope.
• Rejects if the .closeThisDialog() method is called.

Inside the dialog's template, you can use:

• confirm(value): Closes the dialog and resolves the promise with value.
• closeThisDialog(value): Closes the dialog and rejects the promise with value.

<!-- Inside the dialog template -->
<div class="dialog-contents">
    Some message
    <button ng-click="closeThisDialog()">Cancel</button>
    <button ng-click="confirm()">Confirm</button>
</div>

The following methods can be used in the .config() block via ngDialogProvider:

• setForceHtmlReload(boolean): Adds a listener to $locationChangeSuccess to update the html content in the dialog.
• setForceBodyReload(boolean): Adds a listener to $locationChangeSuccess to update the body content in the dialog.
• setOpenOnePerName(boolean): If true, prevents opening a second dialog if a dialog with the same name is already open. Note: open() and openConfirm() will return undefined if the dialog was not opened due to this restriction.

var app = angular.module('exampleApp', ['ngDialog']);

app.config(function (ngDialogProvider) {
    ngDialogProvider.setForceHtmlReload(true);
    ngDialogProvider.setOpenOnePerName(true);
});