ngDialog模态框

摘要

手头的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") {
  	//退出
  }
);