Modals and Popups Provider For Angular.js Applications – ngDialog

Category: Javascript , Modal & Popup | January 11, 2014
Views Total: 4,095
Official Page: Go to website
Last Update: January 11, 2014
License: MIT


Modals and Popups Provider For Angular.js Applications – ngDialog


ngDialog is a module for AngularJS to create highly customizable modal & popup windows on the web page.

Basic Usage:

Load the ngDialog’s basic and theme CSS files in the head section of the page.

<link rel="stylesheet" href="../css/ngDialog.css">
<link rel="stylesheet" href="../css/ngDialog-theme-default.css">
<link rel="stylesheet" href="../css/ngDialog-theme-plain.css">

Create a button to toggle a modal window.

<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>

Load the Angular.js and ngDialog’s script in the page.

<script src=""></script> 
<script src="../js/ngDialog.js"></script>

Modal Template.

<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="">Data passed through directive: <code>{{}}</code></p>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="openSecond()">Open next</button>

The javascript.

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

app.controller('MainCtrl', function ($scope, $rootScope, ngDialog) {
$rootScope.jsonData = '{"foo": "bar"}';
$rootScope.theme = 'ngdialog-theme-default';

$ = function () {{ template: 'firstDialogId', controller: 'InsideCtrl' });

$scope.openDefault = function () {{
template: 'firstDialogId',
controller: 'InsideCtrl',
className: 'ngdialog-theme-default'

$scope.openPlain = function () {
$rootScope.theme = 'ngdialog-theme-plain';{
template: 'firstDialogId',
controller: 'InsideCtrl',
className: 'ngdialog-theme-plain'

$scope.openTemplate = function () {
$scope.value = true;{
template: 'externalTemplate.html',
className: 'ngdialog-theme-plain',
scope: $scope

app.controller('InsideCtrl', function ($scope, ngDialog) {
$scope.openSecond = function () {{
template: '<h3><a href="" ng-click="closeSecond()">Close all by click here!</a></h3>',
plain: true,
closeByEscape: false,
controller: 'SecondModalCtrl'

app.controller('SecondModalCtrl', function ($scope, ngDialog) {
$scope.closeSecond = function () {