摘要
手头的angularJs项目需要做一个用户提醒的弹出框,但是使用浏览器自带的样式不能随心所欲进行修改,所以找到了这个ngDialog来实现自定义弹出框的功能。
安装
我们可以使用bower或者npm来安装这个组件
bower 命令
bower install ng-dialog
npm 命令
npm install ng-dialog
使用
找到下面的三个资源并在项目中引用就行:
<link rel="stylesheet" href="bower_components/ng-dialog/css/ngDialog.css" />
<link rel="stylesheet" href="bower_components/ng-dialog/css/ngDialog-theme-default.css" />
<script src="bower_components/ng-dialog/js/ngDialog.js"></script>
以angularJs应用为例,我们在对应的控制器中进行使用(otp.html 就是我们想要实现的弹窗模板):
var app =angular.module('App', ['ngDialog']);
app.controller('mainCtrl', function ($scope, ngDialog) {
$scope.openDialog=function () {
ngDialog.open({
template:'otp.html',
className:'ngdialog-theme-default'
});
};
});
接下来简单的介绍一些常用的API,日后如果需要使用其他功能可以自行百度查看ngDialog的中文API。
API
调用此方法即可打开一个弹出框
ngDialog.open(options);
调用此方法即可关闭弹出框
ngDialog.close();
options简单介绍
options就是你可以对模态框的操作进行设置,如模板,样式等
如果 true 允许使用普通字符串作为模板,默认 false
plain {Boolean}
如下设置plain为true后,即可使用普通字符串作为模板
ngDialog.open({
template:'<p>“hello world!”</p>',
plain:true
});
如果 false 允许隐藏模式上的关闭按钮,默认 true。
showClose {Boolean}
它允许通过单击 Esc 键(如果要禁用务必设置为false),默认 true 来关闭模式 。
closeByEscape {Boolean}
在模板中使用closeThisDialog()来帮我们完成关闭弹窗
closeThisDialog()
解析对话框什么时候关闭的承诺
closePromise {Promise}
closePromise和closeThisDialog的简单应用
HTML模板
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary exit-ques" ng-click="closeThisDialog('continue')">
{{yesContinue}}
</button>
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('exit')">
{{noExit}}
</button>
</div>
controller 对应代码
var dialog = ngDialog.open({
template : "template.html",
className: "ngdialog-theme-default",
showClose: false,
scope : $scope
});
dialog.closePromise.then(function (data) {
if(data.value === "continue") {
//继续操作
}else if(data.value === "exit") {
//退出
}
);