<!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下载，或者到这里下载：。我是在后面这个链接下的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"><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。
确认对话框