做网站经常会遇到弹出对话框获取用户输入或弹出对话框让用户确认某个操作之类的情景，有一个基于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="/UploadFiles/2021-04-02/angular-1.4.3.min.js">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,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参数获得用户名输入框的值。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。