Node.js使用对话框ngDialog实现步骤详解

这次给大家带来Node.js使用对话框ngDialog实现步骤详解，Node.js使用对话框ngDialog的注意事项有哪些，下面就是实战案例，一起来看一下。

做网站经常会遇到弹出对话框获取用户输入或弹出对话框让用户确认某个操作之类的情景，有一个基于AngularJS的扩展模块可以帮我们优雅地完成这类事情：ngDialog。

ngDialog在github上提供了一个示例网页，演示了它的各种用法，在这里：https://github.com/likeastore/ngDialog/blob/master/example/index.html。ngDialog的github主页的readme也对常用的指令和服务做了较为详细的介绍，可以参考。我这篇就纯粹是参考ngDialog的示例来的。

创建对话框可以是用ngDialog.open(options)或ngDialog.openConfirm(options)。前者打开一个普通的对话框，可以通过options制定诸如主题、模板等一系列属性，后者打开一个默认拒绝escape关闭和点击对话框之外自动关闭的对话框。options是json对象，类似下面：

{template: 'tplId',closeByEscape: false}

示例搭建

先看下我的简单示例。使用express generator创建一个新应用，或者直接使用Node.js开发入门——使用cookie保持登录里的LoginDemo示例。都成。

添加自己写的文件

有三个自己写的文件，ngdialog.html和serverTpl.html文件放在项目的public目录下，ngdialog.js放在public/javascripts下面。

ngdialog.html内容：

 
 
 
 


 
open default
 
Open Plain theme
 
Open use text
 
Open modal
 
Open use template on server
 
Open Confirm
 
 
 
 
 

ngdialog.js内容：

angular.module('myApp', ['ngDialog']).
 controller('myController', function($scope,$rootScope, ngDialog){
  $scope.template = '
text in dialog
Button

							

								
								

									uBrand
									
一站式AI品牌创建平台，在线品牌设计，AI品牌策划，智能品牌营销；uBrand帮助创业者轻松打造个性品牌！
								
								下载 
							
						
';
  //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: '
Text in Modal Dialog
',
    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: '
Please enter your name
User Name:
CancelConfirm
',
    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内容：

 


 

  
Server Template for ngDialog
  
Node.js
  
Express
  
AngularJS
  
MongoDB
 

引入ngDialog

要使用ngDialog，需要在HTML中使用script引入对应的js库文件。另外还要在head部分引入几个css文件。参考ngdialog.html即可。

ngDialog的库文件可以到https://github.com/likeastore/ngDialog下载，或者到这里下载：http://cdnjs.com/libraries/ng-dialog。我是在后面这个链接下的0.4.0版本，把文件重命名了一下。重命名后的几个文件如下：

1. ngDialog-0.4.0.min.js

2. ngDialog-0.4.0.min.css

3. ngDialog-theme-default-0.4.0.min.css

4. ngDialog-theme-plain-0.4.0.min.css

API摘要学习

我学习时遇到了一些疑惑，记录在下面。

对话框内容模板

要显示一个对话框，必须得指定待现实的内容。这是通过template属性指定的。template有三种情况：

1. 嵌入在js或html代码里的纯文字模板，此时需要同时在options里设置plain属性为true，即“plain:true”，然后直接将一段html代码赋值给template，比如template:

   Text in ngDialog

2. 在HTML内定义template模板，同时给模板指定id，将id赋值给template选项，比如“template: ‘templateId'”。而模板可能是这样的：

3. 以外部的html片段（文件）为模板，比如“template: ‘serverTpl.html'”，serverTpl.html文件在服务器上。

指定主题

可以在options里通过className指定主题，目前有ngdialog-theme-default和ngdialog-theme-plain两个主题。这两个注意对应两个css文件，前面我们已经通过HTML引入了。

响应关闭等事件

对话框被关闭时，会发出一些事件，开发者可以监听这些事件来获得通知。具体事件有：

1. ngDialog.opened

2. ngDialog.closing

3. 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参数获得用户名输入框的值。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS实现下拉框联动步骤详解

node前端开发模板引擎Jade使用步骤详解