本文介绍如何在Node.js项目中集成AngularJS的ngDialog库，实现优雅的对话框交互。涵盖普通对话框与确认对话框的配置、模板引用方式、主题设置及事件监听机制，并提供基于Express的完整示例代码，帮助开发者快速掌握弹窗组件的应用。
ngDialog简介与示例搭建
在Web开发中，经常需要弹出对话框以获取用户输入或确认操作。利用基于AngularJS的ngDialog扩展模块，可以优雅地实现此类功能。
ngDialog在GitHub上提供了示例网页，演示了多种用法，地址为：https://github.com/likeastore/ngDialog/blob/master/example/index.html。其GitHub主页的README文件也对常用指令和服务进行了详细介绍，可供参考。本文内容主要基于ngDialog的示例进行整理。
创建对话框可使用ngDialog.open(options)或ngDialog.openConfirm(options)。前者用于打开普通对话框，可通过options指定主题、模板等属性；后者则默认禁止通过Escape键或点击对话框外部来关闭。options为JSON对象，格式如下：
{template: 'tplId',closeByEscape: false}示例搭建
首先查看一个简单的示例。可以使用express generator创建新应用，或直接使用Node.js开发入门教程中的LoginDemo示例。两种方式均可。
添加自己写的文件
需要添加三个自定义文件：ngdialog.html和serverTpl.html置于项目public目录下，ngdialog.js置于public/javascripts目录下。
ngdialog.html内容：
<!doctype html>
<html ng-app="myApp">
<head>
<title>use ngDialog in AngularJS</title>
<link rel='stylesheet' href='/stylesheets/ngDialog-0.4.0.min.css' ><link/>
<link rel='stylesheet' href='/stylesheets/ngDialog-theme-default-0.4.0.min.css' ><link/>
<link rel='stylesheet' href='/stylesheets/ngDialog-theme-plain-0.4.0.min.css' ><link/>
</head>
<body ng-controller='myController'>
<p><button type='button' ng-click='openDialog()'>Open Default</button></p>
<p><button type='button' ng-click='openPlainDialog()'>Open Plain theme</button></p>
<p><button type='button' ng-click='openDialogUseText()'>Open use text</button></p>
<p><button type='button' ng-click='openModal()'>Open modal</button></p>
<p><button type='button' ng-click='openUseExternalTemplate()'>Open use template on server</button></p>
<p><button type='button' ng-click='openConfirmDialog()'>Open Confirm</button></p>
<script src="/javascripts/angular-1.4.3.min.js"></script>
<script src="/javascripts/ngDialog-0.4.0.min.js"></script>
<script src="/javascripts/ngdialog.js"></script>
<!-- Templates -->
<script type="text/ng-template" id="firstDialogId">
<div><p>text in dialog</p></div>
</script>
</body>
</html>ngdialog.js内容：
angular.module('myApp', ['ngDialog']).
controller('myController', function($scope,$rootScope, ngDialog){
$scope.template = '<div><p>text in dialog</p><p><button type="button">Button</button></p><div>';
//different template
$scope.openDialog = function(){
ngDialog.open({template: 'firstDialogId'});
};
$scope.openPlainDialog = function(){
ngDialog.open({
template: 'firstDialogId', //use template id defined in HTML
className: 'ngdialog-theme-plain'
});
}
$scope.openDialogUseText = function(){
ngDialog.open({
template: $scope.template, //use plain text as template
plain: true,
className: 'ngdialog-theme-plain'
});
}
$scope.openModal = function(){
ngDialog.open({
template: '<p>Text in Modal Dialog</p>',
plain: true,
className: 'ngdialog-theme-default',
closeByEscape: false,
closeByDocument: false
});
}
$scope.openUseExternalTemplate = function(){
ngDialog.open({
template: 'serverTpl.html',
plain: false,
className: 'ngdialog-theme-default',
closeByEscape: false,
closeByDocument: false
});
};
$rootScope.userName = "ZhangSan";
$scope.openConfirmDialog = function(){
ngDialog.openConfirm({
template: '<div class="ngdialog-message"><h3>Please enter your name</h3><p>User Name:<input ng-model="userName"></input></p></div><div class="ngdialog-buttons"><button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog()">Cancel</button><button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm(userName)">Confirm</button></div>',
plain: true,
className: 'ngdialog-theme-default'
}).then(
function(value){
console.log('confirmed, value - ', value);
},
function(reason){
console.log('rejected, reason - ', reason);
}
);
}
//listen events
$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'));
});
});
serverTpl.html内容：
<!doctype html>
<html>
<head>
<title>A Server Template for ngDialog</title>
</head>
<body>
<div>
<h3>Server Template for ngDialog</h3>
<li>Node.js</li>
<li>Express</li>
<li>AngularJS</li>
<li>MongoDB</li>
</div>
</body>
</html>
引入ngDialog
使用ngDialog需在HTML中通过script标签引入对应的js库文件，并在head部分引入几个css文件。具体可参考ngdialog.html文件。
ngDialog库文件可从https://github.com/likeastore/ngDialog下载，或从http://cdnjs.com/libraries/ng-dialog获取。本文使用的是后者提供的0.4.0版本，并对文件进行了重命名。重命名后的文件包括：
- ngDialog-0.4.0.min.js
- ngDialog-0.4.0.min.css
- ngDialog-theme-default-0.4.0.min.css
- ngDialog-theme-plain-0.4.0.min.css
API详解：模板、主题与事件
API摘要学习
在学习过程中遇到一些疑惑，记录如下。
对话框内容模板
显示对话框必须指定内容，通过template属性实现。template有三种情况：
- 嵌入在js或html代码中的纯文字模板，此时需在options中设置plain属性为true（即“plain:true”），并将HTML代码直接赋值给template，例如template:<p>Text in ngDialog</p>
- 在HTML内定义template模板并指定id，将id赋值给template选项，如“template: ‘templateId'”。模板示例如下：<script type="text/ng-template" id="firstDialogId"><div><p>text in dialog</p></div></script>
- 以外部的html片段（文件）为模板，如“template: ‘serverTpl.html'”，该文件位于服务器上。
指定主题
可在options中通过className指定主题，目前支持ngdialog-theme-default和ngdialog-theme-plain两个主题。这两个主题对应两个css文件，前文已通过HTML引入。
响应关闭等事件
对话框关闭时会触发一些事件，开发者可监听这些事件以获取通知。具体事件包括：
- ngDialog.opened
- ngDialog.closing
- ngDialog.closed
这些事件定义在$rootScope服务中，因此controller构造函数必须依赖$rootScope。例如当前的模块定义和controller定义如下：
angular.module(‘myApp', [‘ngDialog']).
controller(‘myController', function(scope,scope,rootScope, ngDialog){在模块定义中注明依赖ngDialog模块，在controller定义中注入$rootScope和ngDialog。
监听事件的具体方法见ngdialog.js代码。
此外，可在options中设置preCloseCallback，指定一个函数，该函数在对话框取消关闭前调用。详见https://github.com/likeastore/ngDialog。注意，仅在取消对话框时调用，确认则不调用。因此，preCloseCallback通常用于阻止或提醒用户放弃输入，例如用户注册时已输入信息想退出，可询问是否真的想放弃。
控制器指定与确认对话框应用
指定对话框的controller
可通过options设置controller属性来为对话框指定控制器。该控制器可以是内联（inline）的：
$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'
});
};
也可以是js中定义的。例如在js中定义了名为“InsideCtrl”的controller，可在调用ngDialog.open(options)时在options中设置controller属性：
$scope.openInsideController = function(){
ngDialog.open({
template: "serverTpl.html",
className: "ngdialog-theme-plain",
controller: "InsideCtrl"
});
};
具体示例可参考：https://github.com/likeastore/ngDialog/blob/master/example/index.html。
确认对话框
如需让用户确认删除或输入信息，可使用openConfirm(options)创建此类对话框。ngDialog向$scope注入了两个函数：confirm(value)用于确认关闭对话框，closeThisDialog(reason)用于取消关闭。将它们关联到确认和取消按钮上，即可实现确认或取消操作。
若需让用户输入用户名，可使用ng-model指令将作用域内某个变量与input绑定，在调用confirm时传入该变量，从而在confirm中获取用户填写的值进行后续处理。示例中的openConfirmDialog按钮点击后弹出输入名字的对话框，用户输入完毕后点击Confirm按钮，可通过confirm方法的value参数获得用户名输入框的值。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。