Node.js开发入门—使用对话框ngDialog

原创 2015年09月06日 07:15:55

做网站经常会遇到弹出对话框获取用户输入或弹出对话框让用户确认某个操作之类的情景,有一个基于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内容:

<!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摘要学习

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

对话框内容模板

要显示一个对话框,必须得指定待现实的内容。这是通过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’”,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,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参数获得用户名输入框的值。


其它文章:

版权声明:本文为foruok原创文章,转载请通过订阅号“程序视界”联系foruok获取授权。

js弹出框、对话框、提示框、弹窗总结

js弹出框、对话框、提示框、弹窗总结 一、JS的三种最常见的对话框 [javascript] view plaincopy //=...

NodeJS返回JSON数据填充到Bootstrap的模态框中!

今天刚到学校,状态还可以,遇到个问题这里做个笔记以后可能会用到。问题:在点击表格里面的修改用户要把数据填充到弹出的模态框中。 服务器端(NodeJS) 前端(JS) 效果:...

在服务程序中弹出对话框

http://blog.csdn.net/linux7985/article/details/5694613 先说说在WinXP和Windows2003下用的方法。  第一种方法是在服...

ngDialog 弹出层关闭

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

ng-dialog使用心得

ng-dialog使用心得 一、重写confirm()函数 1.遇到问题: 使用插件API:openConfirm(options)时报错:$scope.openConfirm() is not...

【AngularJS学习】ngDialog中文API

.open(options)打开对话窗口,在每次调用时创建新的对话框实例。接受对象作为唯一的参数。参数选项Options:template {String}对话框模板可以通过所给路径加载外部html模...

Angularjs指令scope对象无法传值

在使用AngularJS的过程中遇到一个奇葩问题,现已解决,写篇水文分享分享。 自定义一个指令,如下 angular.module("dddReferenceDisplayApp",[]) .di...

angular的对话框插件-ng-dialog的用法

angular的对话框插件-ng-dialog的用法

ngDialog 一个简单的AngularJS模态框模板

项目开始的时候我们用的对话框是AngularJS的$modal模态框,但是后来发现$modal打开的对话框是相对页面静止的,如果对话框是一个很长的表单,这样体验度就不是很好了,还有$modal传$sc...

angular 全局confirm确认框

全局确认框是在弹出模态框的基础上修改的。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Node.js开发入门—使用对话框ngDialog
举报原因:
原因补充:

(最多只允许输入30个字)