做网站经常会遇到弹出对话框获取用户输入或弹出对话框让用户确认某个操作之类的情景,有一个基于AngularJS的扩展模块可以帮我们优雅地完成这类事情:ngDialog。
ngDialog在github上提供了一个示例网页,演示了它的各种用法,在这里:https://github.com/likeastore/ngDialog/blob/master/example/index.html.ngDialog的github主页的自述也对常用的指令和服务做了较为详细的介绍,可以参考。我这篇就纯粹是参考ngDialog的示例来的。
创建对话框可以是用ngDialog.open(选项)或ngDialog.openConfirm(选项)。前者打开一个普通的对话框,可以通过选项制定诸如主题,模板等一系列属性,后者打开一个默认拒绝逃脱关闭和点击对话框之外自动关闭的对话框.options是json对象,类似下面:
{模板:tplId, closeByEscape:假}
先看下我的简单示例。使用表达发电机创建一个新应用,或者直接使用node . js开发入门——使用饼干保持登录里的LoginDemo示例。都成。
<强>添加自己写的文件
有三个自己写的文件,ngdialog.html和serverTpl.html文件放在项目的公共目录下,ngdialog.js放在公共/javascripts下面。
ngdialog.html内容:
& lt; !doctype html>
& lt; html ng-app=癿yApp”比;
& lt; head>
& lt; title>用ngDialog AngularJS
rel=& lt;链接样式表的href=' https://www.yisu.com/stylesheets/ngDialog-0.4.0.min.css '祝辞& lt;链接/比;
rel=& lt;链接样式表的href=' https://www.yisu.com/stylesheets/ngDialog-theme-default-0.4.0.min.css '祝辞& lt;链接/比;
rel=& lt;链接样式表的href=' https://www.yisu.com/stylesheets/ngDialog-theme-plain-0.4.0.min.css '祝辞& lt;链接/比;
& lt;/head>
& lt;身体ng-controller=myController的祝辞
& lt; p> & lt;按钮类型=鞍磁ァ眓g-click=皁penDialog()的祝辞开放Default & lt;/p>
& lt; p> & lt;按钮类型=鞍磁ァ眓g-click=皁penPlainDialog()的祝辞开放普通theme & lt;/p>
& lt; p> & lt;按钮类型=鞍磁ァ眓g-click=皁penDialogUseText()的祝辞开放使用text & lt;/p>
& lt; p> & lt;按钮类型=鞍磁ァ眓g-click=皁penModal()的祝辞开放modal & lt;/p>
& lt; p> & lt;按钮类型=鞍磁ァ眓g-click=皁penUseExternalTemplate()的祝辞开放使用template> & lt;/script>
& lt;脚本src=" https://www.yisu.com/javascripts/ngDialog-0.4.0.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/javascripts/ngdialog.js "祝辞& lt;/script>
& lt; !模板——比;
& lt;脚本type=" text/ng-template " id=癴irstDialogId”比;
& lt; div> & lt; p>文本dialog & lt;/div>
& lt;/script>
& lt;/body>
& lt;/html>
ngdialog.js内容:
角。模块(“myApp”, [' ngDialog '])。
控制器(myController,函数(范围、rootScope美元,ngDialog) {
美元的范围。模板=' & lt; div> & lt; p>文本dialog & lt; p> & lt;按钮类型=鞍磁ァ弊４荁utton & lt;/p> & lt; div>”;//不同的模板
美元的范围。openDialog=function () {
ngDialog。打开({模板:“firstDialogId”});
};
美元的范围。openPlainDialog=function () {
ngDialog.open ({
模板:' firstDialogId ',//使用HTML模板中定义id
名称:“ngdialog-theme-plain”
});
}
美元的范围。openDialogUseText=function () {
ngDialog.open ({
模板:美元范围。//使用纯文本作为模板,模板
纯:没错,
名称:“ngdialog-theme-plain”
});
}
美元的范围。openModal=function () {
ngDialog.open ({
模板:“在模态Dialog< & lt; p>文本;/p>”,
纯:没错,
名称:“ngdialog-theme-default”,
closeByEscape:假的,
closeByDocument:假
});
}
美元的范围。openUseExternalTemplate=function () {
ngDialog.open ({
模板:“serverTpl.html”,
纯:假的,
名称:“ngdialog-theme-default”,
closeByEscape:假的,
closeByDocument:假
});
};
rootScope美元。用户名=" ZhangSan”;
美元的范围。openConfirmDialog=function () {
ngDialog.openConfirm ({
模板:' & lt; div类=皀gdialog-message祝辞& lt; h4>请输入您name & lt; p>用户名:& lt; ng-model=输入“用户名”祝辞& lt;/input> & lt;/p> & lt;/div> & lt; div类=皀gdialog-buttons祝辞& lt;按钮类型=鞍磁ァ崩?皀gdialog-button ngdialog-button-primary”ng-click=癱loseThisDialog()“祝辞Cancel
