Modals and Popups Provider For Angular.js Applications – ngDialog

Preview:

Description:

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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></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="ngDialogData.foo">Data passed through directive: <code>{{ngDialogData.foo}}</code></p>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="openSecond()">Open next</button>
</div>
</script>

The javascript.

<script>
var app = angular.module('exampleDialog', ['ngDialog']);
app.controller('MainCtrl', function ($scope, $rootScope, ngDialog) {
$rootScope.jsonData = '{"foo": "bar"}';
$rootScope.theme = 'ngdialog-theme-default';
$scope.open = function () {
ngDialog.open({ template: 'firstDialogId', controller: 'InsideCtrl' });
};
$scope.openDefault = function () {
ngDialog.open({
template: 'firstDialogId',
controller: 'InsideCtrl',
className: 'ngdialog-theme-default'
});
};
$scope.openPlain = function () {
$rootScope.theme = 'ngdialog-theme-plain';
ngDialog.open({
template: 'firstDialogId',
controller: 'InsideCtrl',
className: 'ngdialog-theme-plain'
});
};
$scope.openTemplate = function () {
$scope.value = true;
ngDialog.open({
template: 'externalTemplate.html',
className: 'ngdialog-theme-plain',
scope: $scope
});
}
});
app.controller('InsideCtrl', function ($scope, ngDialog) {
$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('SecondModalCtrl', function ($scope, ngDialog) {
$scope.closeSecond = function () {
ngDialog.close();
};
});
</script>