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

最新推荐文章于 2022-02-25 16:59:18 发布

VIP文章 foruok

最新推荐文章于 2022-02-25 16:59:18 发布

阅读量1.8w

点赞数 3

分类专栏：网络编程 Node.js开发入门文章标签： node.js angularjs express http服务器

本文链接：https://blog.csdn.net/foruok/article/details/48231175

版权

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